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

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-orange-50">
    <div class="container mx-auto px-4 bg-orange-50">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    <li class="text-sm hover:text-gray-700"><a href="#">Testimonials</a></li>
                  </ul>
                </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

Cronos Hero Section with Illustration and Trial CTA

A hero section for the Cronos brand with a navigation bar, a large green serif-style heading, supporting text, and two buttons on the left, paired with a flat illustration of people working with a laptop on the right. The layout is a split-screen with text left and illustration right on a cream background.

Tailwind Component #2

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-white">
    <div class="container mx-auto px-4 bg-white">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    <li class="text-sm hover:text-gray-700"><a href="#">Testimonials</a></li>
                  </ul>
                </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

Cronos Hero Section with Performance Headline and Illustration

A light-themed landing page hero featuring a large dark green heading 'Take care of your performance every day.', supporting copy, two CTA buttons, and a split layout with a flat illustration of two people beside a web interface mockup on a pale yellow circle. A top navigation bar with logo, links, and a yellow trial button sits above the section.

Tailwind Component #3

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-gray-100">
    <div class="container mx-auto px-4 bg-gray-100">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    <li class="text-sm hover:text-gray-700"><a href="#">Testimonials</a></li>
                  </ul>
                </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

Tailwind Component #4

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false, activeSlide: 1, slideCount: 3 }" class="bg-orange-50 relative">
    <div class="absolute top-0 bottom-0 left-0 bg-white w-1/3 hidden lg:block"></div>
    <div class="container mx-auto px-4 relative z-50">
        <div class="flex items-center justify-between py-5 -px-4">
            <div class="w-auto">
                <div class="flex flex-wrap items-center">
                <div class="w-auto mr-14">
                    <a href="#">
                    <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                    </a>
                </div>
                </div>
            </div>
            <div class="w-auto">
                <div class="hidden lg:flex flex-wrap items-center">
                    <ul class="flex items-center mr-16">
                        <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                        <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                        <li class="text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    </ul>
                    <div class="flex items-center">
                        <a class="px-6 py-3 text-sm font-bold text-yellow-900 hover:underline mr-2" href="#">Sign In</a>
                        <a class="px-6 py-3 bg-yellow-500 text-sm text-yellow-900 font-bold hover:bg-yellow-400 focus:ring focus:ring-yellow-200 transition duration-200" href="#">Sign Up</a>
                    </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

Tailwind Component #5

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false, activeSlide: 1, slideCount: 3 }" class="bg-gray-100 relative">
    <div class="absolute top-0 bottom-0 left-0 bg-white w-1/3 hidden lg:block"></div>
    <div class="container mx-auto px-4 relative z-50">
        <div class="flex items-center justify-between py-5 -px-4">
            <div class="w-auto">
                <div class="flex flex-wrap items-center">
                <div class="w-auto mr-14">
                    <a href="#">
                    <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                    </a>
                </div>
                </div>
            </div>
            <div class="w-auto">
                <div class="hidden lg:flex flex-wrap items-center">
                    <ul class="flex items-center mr-16">
                        <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                        <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                        <li class="text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    </ul>
                    <div class="flex items-center">
                        <a class="px-6 py-3 text-sm font-bold text-yellow-900 hover:underline mr-2" href="#">Sign In</a>
                        <a class="px-6 py-3 bg-yellow-500 text-sm text-yellow-900 font-bold hover:bg-yellow-400 focus:ring focus:ring-yellow-200 transition duration-200" href="#">Sign Up</a>
                    </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

Tailwind Component #6

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-gray-100">
    <div class="pb-60 mb-80 relative bg-green-500">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between py-5 -px-4 relative">
              <div class="w-auto">
                <div class="flex flex-wrap items-center">
                  <div class="w-auto mr-14">
                    <a href="#">
                      <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                    </a>
                  </div>
                </div>
              </div>
              <div class="absolute left-1/2 transform -translate-x-1/2">
                  <div class="flex flex-wrap items-center">
                    <div class="w-auto hidden lg:block">
                      <ul class="flex items-center">
                        <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">About</a></li>
                        <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Company</a></li>
                        <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Services</a></li>
                        <li class="text-sm text-green-50 hover:text-green-100"><a href="#">Testimonials</a></li>
                      </ul>
                    </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

Tailwind Component #7

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-white">
    <div class="pb-60 mb-80 relative bg-green-500">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between py-5 -px-4 relative">
              <div class="w-auto">
                <div class="flex flex-wrap items-center">
                  <div class="w-auto mr-14">
                    <a href="#">
                      <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                    </a>
                  </div>
                </div>
              </div>
              <div class="absolute left-1/2 transform -translate-x-1/2">
                  <div class="flex flex-wrap items-center">
                    <div class="w-auto hidden lg:block">
                      <ul class="flex items-center">
                        <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">About</a></li>
                        <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Company</a></li>
                        <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Services</a></li>
                        <li class="text-sm text-green-50 hover:text-green-100"><a href="#">Testimonials</a></li>
                      </ul>
                    </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

Tailwind Component #8

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-no-repeat bg-center bg-cover bg-green-500" style="background-image: url('cronos-assets/elements/squares-background.svg');">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">About</a></li>
                    <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Services</a></li>
                    <li class="text-sm text-green-50 hover:text-green-100"><a href="#">Testimonials</a></li>
                  </ul>
                </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

Tailwind Component #9

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-gradient-to-b from-white to-yellow-50">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    <li class="text-sm hover:text-gray-700"><a href="#">Testimonials</a></li>
                  </ul>
                </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

Tailwind Component #10

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-yellow-50">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    <li class="text-sm hover:text-gray-700"><a href="#">Testimonials</a></li>
                  </ul>
                </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

Tailwind Component #11

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="relative bg-no-repeat bg-cover" style="background-image: url('https://images.unsplash.com/photo-1529260830199-42c24126f198?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1055&amp;q=80');">
    <div class="absolute inset-0 opacity-80 bg-black"></div>
    <div class="relative z-10">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between py-5 -px-4 relative">
              <div class="w-auto">
                <div class="flex flex-wrap items-center">
                  <div class="w-auto mr-14">
                    <a href="#">
                      <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                    </a>
                  </div>
                </div>
              </div>
              <div class="absolute left-1/2 transform -translate-x-1/2">
                  <div class="flex flex-wrap items-center">
                    <div class="w-auto hidden lg:block">
                      <ul class="flex items-center">
                        <li class="mr-9 text-sm text-white hover:text-opacity-80"><a href="#">About</a></li>
                        <li class="mr-9 text-sm text-white hover:text-opacity-80"><a href="#">Company</a></li>
                        <li class="mr-9 text-sm text-white hover:text-opacity-80"><a href="#">Services</a></li>
                        <li class="text-sm text-white hover:text-opacity-80"><a href="#">Testimonials</a></li>
                      </ul>
                    </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

Tailwind Component #12

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-gray-100">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    <li class="text-sm hover:text-gray-700"><a href="#">Testimonials</a></li>
                  </ul>
                </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

Tailwind Component #13

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-white">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    <li class="text-sm hover:text-gray-700"><a href="#">Testimonials</a></li>
                  </ul>
                </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

Tailwind Component #14

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-yellow-50 lg:mb-32 pb-20 lg:pb-10">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="w-auto">
              <button x-on:click="mobileNavOpen = !mobileNavOpen">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="black"></path>
                  </svg>
              </button>
          </div>
        </div>
        <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
          <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
          <nav class="relative z-10 px-9 pt-8 bg-white h-full overflow-y-auto">
            <div class="flex flex-wrap h-full">

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

Tailwind Component #15

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-green-500 lg:mb-32 pb-20 lg:pb-10">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                </a>
              </div>
              <ul class="hidden lg:flex items-center">
                <li class="mr-6"><a class="text-sm text-white hover:text-opacity-80" href="#">About</a></li>
                <li class="mr-6"><a class="text-sm text-white hover:text-opacity-80" href="#">Company</a></li>
                <li class="mr-6"><a class="text-sm text-white hover:text-opacity-80" href="#">Services</a></li>
                <li><a class="text-sm text-white hover:text-opacity-80" href="#">Testimonials</a></li>
              </ul>
            </div>
          </div>
          <div class="w-auto">
                <div class="hidden lg:block">
                    <div class="inline-block">
                        <a class="px-6 py-3 text-sm font-bold text-white hover:underline mr-2" href="#">Sign In</a>
                        <a class="px-6 py-3 bg-green-600 text-sm text-green-50 font-bold hover:bg-green-700 focus:ring focus:ring-green-300 transition duration-200" href="#">Sign Up</a>
                    </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

Tailwind Component #16

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-yellow-50 lg:mb-32 pb-20 lg:pb-10">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
              <ul class="hidden lg:flex items-center">
                <li class="mr-6"><a class="text-sm hover:text-gray-700" href="#">About</a></li>
                <li class="mr-6"><a class="text-sm hover:text-gray-700" href="#">Company</a></li>
                <li class="mr-6"><a class="text-sm hover:text-gray-700" href="#">Services</a></li>
                <li><a class="text-sm hover:text-gray-700" href="#">Testimonials</a></li>
              </ul>
            </div>
          </div>
          <div class="w-auto">
                <div class="hidden lg:block">
                    <div class="inline-block">
                        <a class="px-6 py-3 text-sm font-bold hover:underline mr-2" href="#">Sign In</a>
                        <a class="px-6 py-3 bg-yellow-500 hover:bg-yellow-400 focus:ring focus:ring-yellow-200 text-black text-sm font-bold transition duration-200" href="#">Sign Up</a>
                    </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

Tailwind Component #17

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-green-500 lg:mb-32 pb-20 lg:pb-10">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="w-auto">
              <button x-on:click="mobileNavOpen = !mobileNavOpen">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="white"></path>
                  </svg>
              </button>
          </div>
        </div>
        <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
          <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
          <nav class="relative z-10 px-9 pt-8 bg-white h-full overflow-y-auto">
            <div class="flex flex-wrap h-full">

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

Tailwind Component #18

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-gray-100 lg:mb-32 pb-20 lg:pb-10">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="w-auto">
              <button x-on:click="mobileNavOpen = !mobileNavOpen">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
                  </svg>
              </button>
          </div>
        </div>
        <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
          <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
          <nav class="relative z-10 px-9 pt-8 bg-white h-full overflow-y-auto">
            <div class="flex flex-wrap h-full">

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

Tailwind Component #19

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-gray-100 lg:mb-32 pb-20 lg:pb-10">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
              <ul class="hidden lg:flex items-center">
                <li class="mr-6"><a class="text-sm hover:text-gray-700" href="#">About</a></li>
                <li class="mr-6"><a class="text-sm hover:text-gray-700" href="#">Company</a></li>
                <li class="mr-6"><a class="text-sm hover:text-gray-700" href="#">Services</a></li>
                <li><a class="text-sm hover:text-gray-700" href="#">Testimonials</a></li>
              </ul>
            </div>
          </div>
          <div class="w-auto">
                <div class="hidden lg:block">
                    <div class="inline-block">
                        <a class="px-6 py-3 text-sm font-bold hover:underline mr-2" href="#">Sign In</a>
                        <a class="px-6 py-3 bg-yellow-500 hover:bg-yellow-400 focus:ring focus:ring-yellow-200 text-black text-sm font-bold transition duration-200" href="#">Sign Up</a>
                    </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

Tailwind Component #20

Tailwind CSS

Cronos

<section x-data="{ mobileNavOpen: false }" class="bg-no-repeat bg-center bg-cover bg-green-500" style="background-image: url('cronos-assets/elements/squares-background.svg');">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">About</a></li>
                    <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Services</a></li>
                    <li class="text-sm text-green-50 hover:text-green-100"><a href="#">Testimonials</a></li>
                  </ul>
                </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

Tailwind Components by Shuffle

Browse 211 of ready-made components in Tailwind and Cronos 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 – Cronos Library

Framework

UI Library

Components

Tailwind Component #1

Get the code for 13,400+ components

Cronos Hero Section with Illustration and Trial CTA

Tailwind Component #2

Get the code for 13,400+ components

Cronos Hero Section with Performance Headline and Illustration

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

Tailwind Component #12

Get the code for 13,400+ components

Tailwind Component #13

Get the code for 13,400+ components

Tailwind Component #14

Get the code for 13,400+ components

Tailwind Component #15

Get the code for 13,400+ components

Tailwind Component #16

Get the code for 13,400+ components

Tailwind Component #17

Get the code for 13,400+ components

Tailwind Component #18

Get the code for 13,400+ components

Tailwind Component #19

Get the code for 13,400+ components

Tailwind Component #20

Get the code for 13,400+ components

Tailwind Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support