Tailwind Components in Metis 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

Tailwind Component #1

Tailwind CSS

Metis

<section class="xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="py-12 text-center">
      <div class="max-w-lg mx-auto mb-8">

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

Metis Hero Section with Dashboard Preview and Customer Logos

A landing page hero with a navigation bar, centered headline and subheading, two CTA buttons, and a faded dashboard illustration surrounded by pastel blobs. A row of muted company logos sits below the illustration as social proof.

Hero section generator

Tailwind Component #2

Tailwind CSS

Metis

<section class="xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="pt-12 text-center">
      <div class="max-w-lg mx-auto mb-8">

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

Metis Hero Section with Dashboard Preview and Partner Logos

A landing page hero for the Metis product featuring a centered headline, subtext, and two CTA buttons above an illustrative dashboard screenshot with overview metrics and transaction tables. A row of partner logos appears beneath the preview.

Hero section generator

Tailwind Component #3

Tailwind CSS

Metis

<section class="xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="pt-12 pb-16 text-center">
      <div class="max-w-lg mx-auto mb-8">

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

Hero section generator

Tailwind Component #4

Tailwind CSS

Metis

<section class="xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="py-12 text-center">
      <div class="max-w-lg mx-auto mb-8">

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

Hero section generator

Tailwind Component #5

Tailwind CSS

Metis

<section class="xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="pt-12 text-center">
      <div class="max-w-lg mx-auto mb-8">

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

Hero section generator

Tailwind Component #6

Tailwind CSS

Metis

<section class="relative" x-data="{ mobileNavOpen: false }">
  <div class="hidden lg:block absolute inset-0 w-1/2 ml-auto bg-blueGray-50 z-0" style="z-index: -1"></div>
  <div class="container px-4 mx-auto">
    <nav class="flex items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden ml-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:space-x-10 ml-10">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block ml-auto"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="flex flex-wrap items-center -mx-3">

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

Hero section generator

Tailwind Component #7

Tailwind CSS

Metis

<section x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10 mr-6" src="metis-assets/logos/metis/metis.svg">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="flex flex-wrap items-center -mx-3">
      <div class="w-full lg:w-1/2 px-3">

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

Hero section generator

Tailwind Component #8

Tailwind CSS

Metis

<section class="relative overflow-x-hidden" x-data="{ mobileNavOpen: false }">
  <div class="hidden md:block absolute top-0 left-0 mt-32 -ml-32 lg:-ml-24">
    <img class="h-64 lg:h-80" src="metis-assets/illustrations/walk-dog.png" alt="">
  </div>
  <div class="hidden md:block absolute top-0 right-0 mt-32 -mr-32 lg:-mr-16">
    <img class="h-64 lg:h-80" src="metis-assets/illustrations/phone-online-shopping.png" alt="">
  </div>
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>

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

Hero section generator

Tailwind Component #9

Tailwind CSS

Metis

<section x-data="{ mobileNavOpen: false }">
  <div class="md:pb-20 bg-top bg-cover bg-no-repeat" style="background-image: url('https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;h=450&amp;q=80&amp;blend=1e293b&amp;sat=30&amp;blend-mode=multiply')">
    <div class="container px-4 mx-auto">
      <nav class="flex justify-between items-center py-6">
        <a class="text-3xl text-white font-semibold leading-none" href="#">
          <img class="h-10" src="metis-assets/logos/metis/metis-light-name.svg" alt="" width="auto">
        </a>
        <div class="lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blueGray-100 hover:text-blueGray-200 rounded border border-blueGray-200 hover:border-blueGray-300">
            <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <title>Mobile menu</title>
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
            </svg>
          </button>
        </div>
        <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
          <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">Product</a></li>
          <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">Company</a></li>
          <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">About Us</a></li>
          <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">Features</a></li>
        </ul>
        <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blueGray-100 hover:text-blueGray-200 font-semibold leading-none border border-blueGray-200 hover:border-blueGray-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
      </nav>
      <div class="py-12 text-center">

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

Hero section generator

Tailwind Component #10

Tailwind CSS

Metis

<section class="pb-8 bg-top bg-cover bg-no-repeat" style="background-image: url('https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;h=450&amp;q=80&amp;blend=1e293b&amp;sat=30&amp;blend-mode=multiply')" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl text-white font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis-light-name.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blueGray-100 hover:text-blueGray-200 rounded border border-blueGray-200 hover:border-blueGray-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blueGray-100 hover:text-blueGray-200 font-semibold leading-none border border-blueGray-200 hover:border-blueGray-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="py-12 text-center">
      <div class="max-w-lg mx-auto mb-8">

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

Hero section generator

Tailwind Component #11

Tailwind CSS

Metis

<section class="py-20" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <h2 class="text-3xl lg:text-4xl mb-8 font-bold font-heading">Our Blog</h2>
    <div class="flex flex-wrap -mx-3">
      <div class="w-full lg:w-1/3 px-3 mb-12">
        <a href="#">
          <img class="h-80 w-full object-cover rounded" src="https://images.unsplash.com/photo-1585441695325-21557ef66366?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 text-sm text-blue-400">
            <span>CATEGORY</span>
            <span class="text-blueGray-400">24 Jan, 2020</span>
          </p>
          <h3 class="my-2 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet.</h3>
          <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
        </a>
      </div>
      <div class="w-full lg:w-2/3 px-3 mb-12">
        <a href="#">
          <img class="h-80 w-full object-cover rounded" src="https://images.unsplash.com/photo-1519017524945-ed31bb7a3786?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 text-sm text-blue-400">
            <span>CATEGORY</span>
            <span class="text-blueGray-400">24 Jan, 2020</span>
          </p>
          <h3 class="my-2 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
          <p class="text-blueGray-400 leading-loose">Aenean tempus orci eu est ultrices hendrerit. Fusce suscipit, leo a semper venenatis, felis urna pulvinar nibh, vitae porta erat risus sed mauris. Vestibulum vehicula leo eget libero eleifend.</p>

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 Post Card Grid with Abstract Image Headers

A blog section titled "Our Blog" showing five post cards in a mixed grid, with one wide card and several square cards, each with abstract fluid-art images, category label, date, heading, and excerpt. A blue "Show all posts" button is centered below the grid.

Blog generator

Tailwind Component #12

Tailwind CSS

Metis

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg mx-auto text-center">
      <span class="inline-block py-1 px-3 text-xs md:text-sm rounded-xl bg-blue-50 text-blue-600 font-semibold">Lorem ipsum</span>
      <h2 class="my-3 text-3xl md:text-4xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="text-blueGray-400 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      <div class="mt-8"><a class="block sm:inline-block py-4 px-8 mb-4 sm:mb-0 sm:mr-3 text-xs text-white text-center font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Check Now</a><a class="block sm:inline-block py-4 px-8 text-xs text-blueGray-500 hover:text-blueGray-600 text-center font-semibold leading-none bg-white border border-blueGray-200 hover:border-blueGray-300 rounded" href="#">Learn more</a></div>
    </div>
  </div>
</section>

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

Centered Hero Section with Badge, Heading, Subtext, and Two CTA Buttons

A centered, light-background hero section with a small blue pill badge, a large bold two-line heading, gray supporting text, and a primary filled button paired with a secondary outlined button. The stacked layout and minimal styling make it suited to marketing landing pages.

Call to action generator

Tailwind Component #13

Tailwind CSS

Metis

<section class="py-12 md:py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg mx-auto mb-12 text-center">
      <span class="inline-block py-1 px-3 text-xs font-semibold bg-blue-100 text-blue-600 rounded-xl">Lorem ipsum</span>
      <h2 class="text-3xl md:text-4xl mt-2 mb-4 font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
    </div>
    <div class="flex flex-wrap -mx-3 mb-6 lg:mb-0">
      <div class="w-full lg:w-1/2 flex flex-wrap px-3 mb-6 lg:md-0">
        <div class="w-1/2 h-64 pr-3 pb-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="w-1/2 h-64 pl-3 pb-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1529513342590-3b342bb7dd67?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="w-1/2 h-64 pr-3 pt-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1489058535093-8f530d789c3b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="w-1/2 h-64 pl-3 pt-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1602883440931-c268da6122b0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-3">
        <img class="h-128 w-full object-cover rounded" src="https://images.unsplash.com/photo-1501769214405-5e5ee5125a02?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=698&amp;q=80" alt="">

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

Image Gallery Section with Heading and Bento Grid

A light-background section with a small pill badge, a bold two-line heading, and muted supporting text above a mixed-size grid of architectural photographs. The grid combines small square tiles with larger spanning tiles, presenting building images as illustrative content rather than interactive controls.

Portfolio generator

Tailwind Component #14

Tailwind CSS

Metis

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto text-center">
      <h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading">
        <span>Lorem ipsum</span>
        <span class="text-blue-600">dolor sit</span>
        <span>amet, consectetur adipiscing.</span>
      </h2>
      <p class="mb-8 text-blueGray-400">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
      <div class="flex flex-wrap max-w-lg mx-auto">
        <div class="flex w-full md:w-2/3 px-3 mb-3 md:mb-0 md:mr-6 bg-blueGray-100 rounded">
          <svg class="h-6 w-6 my-auto text-blueGray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
          </svg>
          <input class="w-full pl-3 py-4 text-xs text-blueGray-400 font-semibold leading-none bg-blueGray-100 outline-none" type="text" placeholder="Type your e-mail">
        </div>
        <button class="w-full md:w-auto py-4 px-8 text-xs text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" type="submit">Sign Up</button>
      </div>
    </div>
  </div>
</section>

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

Centered Hero with Email Signup Form

A centered hero section with a two-line bold heading, a muted subheading, and an inline email input paired with a blue Sign Up button. It is a simple light-background landing section for collecting email addresses.

Newsletter generator

Tailwind Component #15

Tailwind CSS

Metis

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-col md:flex-row justify-around">
      <div class="max-w-md md:mr-10 mb-10 md:mb-0">
        <span class="inline-block py-1 px-3 text-xs font-semibold bg-blue-100 text-blue-600 rounded-xl">Our Team</span>
        <h2 class="text-3xl md:text-4xl mt-2 mb-4 font-bold font-heading">Lorem ipsum dolor sit amet consectetur adipisicing</h2>
        <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis quisquam cum aliquam rem.</p>
      </div>
      <div class="flex flex-wrap">
        <div class="w-1/2 p-5">
          <img class="h-20 w-20 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 mb-2 text-xl">Anne Bailey</p>
          <p class="text-sm text-blueGray-400">CEO</p>
        </div>
        <div class="w-1/2 p-5">
          <img class="h-20 w-20 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 mb-2 text-xl">Julie Brown</p>
          <p class="text-blueGray-400">Head of Development</p>
        </div>
        <div class="w-1/2 p-5">
          <img class="h-20 w-20 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 mb-2 text-xl">Tom Jones</p>
          <p class="text-blueGray-400">Head of Operations</p>
        </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

Team Section with Heading and Member Avatar Grid

A split-layout team section with a pill label, large heading, and supporting paragraph on the left, and a two-column grid of circular avatar photos with names and job titles on the right. The design is light and minimal with generous whitespace and no interactive controls visible.

Team generator

Tailwind Component #16

Tailwind CSS

Metis

<section class="py-20 xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <h2 class="max-w-lg mx-auto mb-4 text-4xl font-bold font-heading">
        <span>Start saving time today and</span>
        <span class="text-blue-600">choose</span>
        <span>your best plan</span>
      </h2>
      <p class="max-w-sm mx-auto text-lg text-blueGray-400">Best for freelance developers who need to save their time</p>
    </div>
    <div class="flex flex-wrap -mx-3">
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="pt-16 pb-8 px-4 text-center bg-white rounded shadow">
          <img class="h-20 mb-6 mx-auto" src="metis-assets/illustrations/people.png" alt="">
          <h3 class="mb-2 text-4xl font-bold font-heading">Begginer</h3>
          <span class="text-4xl text-blue-600 font-bold font-heading">$32.99</span>
          <p class="mt-2 mb-8 text-blueGray-400">user per month</p>
          <div class="flex flex-col items-center mb-8">
            <ul class="text-blueGray-400">
              <li class="flex mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>3 Emails</span>

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

Three-Tier Pricing Section with Highlighted Middle Plan

A pricing section with a centered heading and three side-by-side plan cards (Beginner, Intermediate, Professional) showing monthly prices, feature checklists, and Start Free Trial and Purchase buttons. The middle Intermediate card is highlighted with a solid blue background to emphasize it.

Pricing generator

Tailwind Component #17

Tailwind CSS

Metis

<div class="fixed bottom-0 inset-x-0 px-4 z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto pt-4 px-6 pb-6 mb-8 bg-blueGray-800 text-white rounded">
    <p class="font-bold font-heading">Cookie Policy</p>
    <p class="mt-3 mb-6 text-blueGray-200 text-sm">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the ‘how to reject cookies' section of our . Otherwise, if you agree to our use of cookies, please continue to use our website.</p>
    <a x-on:click.prevent="open=false" class="inline-block py-3 px-6 mr-2 text-xs leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Accept Cookies</a><a x-on:click.prevent="open=false" class="inline-block py-3 px-6 text-xs leading-none border border-blue-500 hover:border-blue-400 hover:text-blueGray-200 rounded" href="#">Refuse Cookies</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

Dark Cookie Policy Consent Banner with Accept and Refuse Buttons

A dark rounded banner titled Cookie Policy with a paragraph explaining cookie usage and two action buttons, Accept Cookies (filled blue) and Refuse Cookies (outlined). It functions as a notification-style consent prompt displayed as a contained card.

Cookies generator

Tailwind Component #18

Tailwind CSS

Metis

<section class="py-20 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="bg-white px-6 py-4 rounded shadow">
      <table class="w-full">
        <thead>
          <tr class="text-xs"><th class="pb-4 font-normal text-left">Package</th><th class="pb-4 font-normal">Feature 1</th><th class="pb-4 font-normal">Feature 2</th><th class="pb-4 font-normal">Feature 3</th><th class="pb-4 font-normal">Feature 4</th><th class="pb-4 font-normal">Feature 5</th></tr>
        </thead>
        <tbody>
          <tr class="bg-blueGray-100">
            <td class="px-6 py-4 text-xs font-semibold">Example for Package 1</td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>

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

Package Feature Comparison Table with Check Icons

A comparison table listing eight example packages against five features, with green check and red cross-circle icons indicating inclusion or exclusion. Rows alternate between light gray and white backgrounds on a white card with a light page background.

Tables generator

Tailwind Component #19

Tailwind CSS

Metis

<section class="relative pb-20">
  <div class="hidden lg:block absolute inset-0 w-1/2 ml-auto bg-blue-600">
    <div class="flex items-center h-full">
      <img class="lg:max-w-lg mx-auto" src="metis-assets/illustrations/walk-dog.png" alt="">
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="relative flex flex-wrap">
      <div class="lg:flex lg:flex-col w-full lg:w-1/2 py-6 lg:pr-20">
        <div class="flex justify-between items-center w-full mb-12 lg:mb-20">
          <a class="text-3xl font-semibold leading-none" href="#">
            <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
          </a>
          <a class="inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Sign Up</a>
        </div>
        <div class="w-full max-w-lg mx-auto lg:mx-0 my-auto">
          <span class="text-sm text-blueGray-400">Sign In</span>
          <h4 class="mb-6 text-3xl">Join our community</h4>
          <div class="flex mb-4 px-4 bg-blueGray-50 rounded">
            <input class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none" type="email" placeholder="name@email.com">
            <svg class="h-6 w-6 ml-4 my-auto text-blueGray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
            </svg>
          </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

Metis Sign In Split-Screen Form with Social Login

A split-screen sign-in page with a left-side form containing email and password fields, a primary Sign In button, and Facebook and Google social login options. The right panel displays a large blue illustration of a person walking a dog beside city buildings, serving as decorative brand imagery.

Tailwind Component #20

Tailwind CSS

Metis

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3">
      <div class="w-full lg:w-1/2 px-3">
        <div class="max-w-sm">
          <span class="text-sm text-blueGray-400">Contact Us</span>
          <h2 class="mt-2 text-4xl font-bold font-heading">We will be glad to hear from you!</h2>
        </div>
        <div class="mt-10 lg:mt-24">
          <div class="mb-10 leading-relaxed">
            <h3 class="text-sm text-blueGray-400">Phone</h3>
            <p>+ 48 654-430-309</p>
          </div>
          <div class="mb-10 leading-relaxed">
            <h4 class="text-sm text-blueGray-400">E-mail</h4>
            <p>info@metis.com</p>
          </div>
          <div class="mb-10 leading-relaxed">
            <h4 class="text-sm text-blueGray-400">Address</h4>
            <p>11567 E Broadview Dr</p>
            <p>Kiowa, Colorado(CO), 80117</p>
          </div>
        </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

Split-Screen Contact Form with Office Details

A two-column contact section with a heading and phone, email, and address details on the left, and a form with department radio options, subject, name, email, message fields, a terms checkbox, and a blue Submit button on the right.

Contact generator

Tailwind Components by Shuffle

Browse 114 of ready-made components in Tailwind and Metis library. They are divided into UI libraries that our professional designers designed. Each of them has a resource of many variations of different types of components. Under each of them, there is a clear code created by our team of developers.

All elements available in the editor are fully responsive. You will get full access to them by subscribing to our drag and drop editor.

Try the demo for free!

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Components – Metis Library

Framework

UI Library

Components

Tailwind Component #1

Get the code for 13,400+ components

Metis Hero Section with Dashboard Preview and Customer Logos

Tailwind Component #2

Get the code for 13,400+ components

Metis Hero Section with Dashboard Preview and Partner Logos

Tailwind Component #3

Get the code for 13,400+ components

Tailwind Component #4

Get the code for 13,400+ components

Tailwind Component #5

Get the code for 13,400+ components

Tailwind Component #6

Get the code for 13,400+ components

Tailwind Component #7

Get the code for 13,400+ components

Tailwind Component #8

Get the code for 13,400+ components

Tailwind Component #9

Get the code for 13,400+ components

Tailwind Component #10

Get the code for 13,400+ components

Tailwind Component #11

Get the code for 13,400+ components

Blog Post Card Grid with Abstract Image Headers

Tailwind Component #12

Get the code for 13,400+ components

Centered Hero Section with Badge, Heading, Subtext, and Two CTA Buttons

Tailwind Component #13

Get the code for 13,400+ components

Image Gallery Section with Heading and Bento Grid

Tailwind Component #14

Get the code for 13,400+ components

Centered Hero with Email Signup Form

Tailwind Component #15

Get the code for 13,400+ components

Team Section with Heading and Member Avatar Grid

Tailwind Component #16

Get the code for 13,400+ components

Three-Tier Pricing Section with Highlighted Middle Plan

Tailwind Component #17

Get the code for 13,400+ components

Dark Cookie Policy Consent Banner with Accept and Refuse Buttons

Tailwind Component #18

Get the code for 13,400+ components

Package Feature Comparison Table with Check Icons

Tailwind Component #19

Get the code for 13,400+ components

Metis Sign In Split-Screen Form with Social Login

Tailwind Component #20

Get the code for 13,400+ components

Split-Screen Contact Form with Office Details

Tailwind Components by Shuffle

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products