Tailwind Blog Components in Nigodo library

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Blog from Nigodo

Tailwind CSS

Nigodo

<section class="py-26 bg-white" x-data="{ category: '', showContent: false }" x-init="category = $refs.category1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mx-auto mb-16 text-center">
      <span class="text-lg font-extrabold text-indigo-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-4">Our mission is to make knowledge and news accessible for everyone.</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      <div class="inline-flex w-full max-w-md p-4 items-center bg-white border-2 border-indigo-900 rounded shadow">
        <a class="text-indigo-900 hover:text-indigo-800" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.94731 18.6997 5.81279 16.9855 4.27665C15.2714 2.74051 13.0338 1.91951 10.7329 1.98247C8.43203 2.04543 6.24272 2.98757 4.61514 4.61515C2.98756 6.24273 2.04543 8.43204 1.98247 10.7329C1.91951 13.0338 2.7405 15.2714 4.27664 16.9855C5.81278 18.6997 7.9473 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7737 20.4936 21.8481 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5064 21.8481 21.617 21.7737 21.71 21.68C21.8902 21.4935 21.991 21.2443 21.991 20.985C21.991 20.7257 21.8902 20.4765 21.71 20.29ZM11 18C9.61553 18 8.26215 17.5895 7.111 16.8203C5.95986 16.0511 5.06265 14.9579 4.53284 13.6788C4.00303 12.3997 3.8644 10.9922 4.1345 9.63437C4.4046 8.2765 5.07128 7.02922 6.05025 6.05026C7.02922 5.07129 8.2765 4.4046 9.63436 4.13451C10.9922 3.86441 12.3997 4.00303 13.6788 4.53285C14.9579 5.06266 16.0511 5.95987 16.8203 7.11101C17.5895 8.26216 18 9.61553 18 11C18 12.8565 17.2625 14.637 15.9497 15.9498C14.637 17.2625 12.8565 18 11 18Z" fill="#171952"></path>
          </svg>
        </a>
        <input class="bg-transparent px-3 text-lg font-extrabold text-indigo-900 placeholder-indigo-900 outline-none" type="search" placeholder="Search">
      </div>
    </div>
    <div class="mb-10">
      <div class="lg:flex items-center -mb-4">
        <a x-ref="category1" x-on:click.prevent="category = $refs.category1.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl font-extrabold" :class="{ 'text-gray-400 hover:text-gray-500': category != $refs.category1.textContent }" href="#">All Categories</a>
        <a x-ref="category2" x-on:click.prevent="category = $refs.category2.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-gray-400 hover:text-gray-500 font-extrabold" :class="{ 'text-gray-400 hover:text-gray-500': category != $refs.category2.textContent }" href="#">Technology</a>
        <a x-ref="category3" x-on:click.prevent="category = $refs.category3.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-gray-400 hover:text-gray-500 font-extrabold" :class="{ 'text-gray-400 hover:text-gray-500': category != $refs.category3.textContent }" href="#">Development</a>
        <a x-ref="category4" x-on:click.prevent="category = $refs.category4.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-gray-400 hover:text-gray-500 font-extrabold" :class="{ 'text-gray-400 hover:text-gray-500': category != $refs.category4.textContent }" href="#">Marketing</a>
        <a x-ref="category5" x-on:click.prevent="category = $refs.category5.textContent" class="inline-block mb-4 text-xl text-gray-400 hover:text-gray-500 font-extrabold" :class="{ 'text-gray-400 hover:text-gray-500': category != $refs.category5.textContent }" href="#">Startup</a>
    </div>
    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Blog article card grid with category tabs and search

A news/blog listing section with a centered heading, search input, category tabs, a two-column grid of article cards with images, category tags, metadata, and read-more links, and a Show more button. Cards use dark navy outlines and offset shadows.