<section x-data="{ showContent: false }" class="py-24 overflow-hidden">
<div class="container px-4 mx-auto">
<div class="mb-20 md:max-w-2xl text-center mx-auto">
<span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
<h2 class="font-heading text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Blog</h2>
</div>
<div class="flex flex-wrap -m-10 mb-10">
<div class="w-full md:w-1/2 p-10">
<div class="mb-8 overflow-hidden rounded-5xl">
<img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/skyscraper5.png" alt="">
</div>
<div class="flex flex-wrap items-center -m-2 mb-4">
<div class="w-auto p-2">
<span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
</div>
<div class="w-auto p-2">
<svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
</svg>
</div>
<div class="w-auto p-2">
<span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
</div>
</div>
<a class="group block mb-4" href="#">
<h3 class="font-heading text-3xl text-white tracking-3xl hover:underline">Women in business: an interview with Sarah Townsend</h3>
</a>
<p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation</p>
<div class="flex flex-wrap -m-1.5">
<div class="w-auto p-1.5">
<div class="py-3.5 px-6 text-sm text-white hover:text-gray-600 font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">Building our platform</div>
</div>
<div class="w-auto p-1.5">
<div class="py-3.5 px-6 text-sm text-white hover:text-gray-600 font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">On-Demand</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 p-10">
<div class="flex flex-wrap -m-4">
<div class="w-full p-4">
<div class="flex flex-wrap items-center -m-4">
<div class="w-auto p-4">
<div class="overflow-hidden rounded-2xl">
<img class="transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/hand5.png" alt="">
</div>
</div>
<div class="flex-1 p-4">
<span class="inline-block mb-2 text-sm text-white text-opacity-60">June 21. 2023</span>
<a href="#">
<h3 class="font-heading text-2xl text-white tracking-2xl hover:underline">It is a long established fact that a reader will be distracted by the readable</h3>
</a>
</div>
</div>
</div>
<div class="w-full p-4">
<div class="flex flex-wrap items-center -m-4">
<div class="w-auto p-4">
<div class="overflow-hidden rounded-2xl">
<img class="transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/cash5.png" alt="">
</div>
</div>
<div class="flex-1 p-4">
<span class="inline-block mb-2 text-sm text-white text-opacity-60">July 14. 2023</span>
<a href="#">
<h3 class="font-heading text-2xl text-white tracking-2xl hover:underline">It's a known truth that easily readable text can lead readers astray.</h3>
</a>
</div>
</div>
</div>
<div class="w-full p-4">
<div class="flex flex-wrap items-center -m-4">
<div class="w-auto p-4">
<div class="overflow-hidden rounded-2xl">
<img class="transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/paper5.png" alt="">
</div>
</div>
<div class="flex-1 p-4">
<span class="inline-block mb-2 text-sm text-white text-opacity-60">May 21. 2023</span>
<a href="#">
<h3 class="font-heading text-2xl text-white tracking-2xl hover:underline">For quite some time, it's been accepted that readable text can divert a reader's attention.</h3>
</a>
</div>
</div>
</div>
<div class="w-full p-4">
<div class="flex flex-wrap items-center -m-4">
<div class="w-auto p-4">
<div class="overflow-hidden rounded-2xl">
<img class="transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/money5.png" alt="">
</div>
</div>
<div class="flex-1 p-4">
<span class="inline-block mb-2 text-sm text-white text-opacity-60">Aug 11. 2023</span>
<a href="#">
<h3 class="font-heading text-2xl text-white tracking-2xl hover:underline">It's widely acknowledged that readers may be distracted by easily digestible content.</h3>
</a>
</div>
</div>
</div>
<div :class="{ 'hidden': !showContent }" class="hidden w-full p-4">
<div class="flex flex-wrap items-center -m-4 mb-4">
<div class="w-auto p-4">
<div class="overflow-hidden rounded-2xl">
<img class="transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/hand5.png" alt="">
</div>
</div>
<div class="flex-1 p-4">
<span class="inline-block mb-2 text-sm text-white text-opacity-60">Aug 13. 2023</span>
<a href="#">
<h3 class="font-heading text-2xl text-white tracking-2xl hover:underline">A well-established reality is that readers often get sidetracked by straightforward text.</h3>
</a>
</div>
</div>
<div class="flex flex-wrap items-center -m-4">
<div class="w-auto p-4">
<div class="overflow-hidden rounded-2xl">
<img class="transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/cash5.png" alt="">
</div>
</div>
<div class="flex-1 p-4">
<span class="inline-block mb-2 text-sm text-white text-opacity-60">Sep 4. 2023</span>
<a href="#">
<h3 class="font-heading text-2xl text-white tracking-2xl hover:underline">Long recognized is the fact that a reader can be swayed by easily readable content.</h3>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent }" class="block px-8 py-4 max-w-max mx-auto font-medium tracking-tighter bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 border-2 border-green-400 rounded-full transition duration-300" href="#">See more articles</a>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
