Tailwind Components in Darkpro library

Framework

UI Library

Components

Tailwind Component #41

Tailwind CSS

DarkPro

<section class="relative py-20 overflow-hidden bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto mb-10 lg:mb-0">
    <div class="w-full lg:w-1/2">
      <div class="flex flex-wrap lg:h-96 sm:max-w-lg">
        <div class="flex items-center justify-center mb-4">
          <a class="text-xs text-neutral-400 hover:text-white transition-colors duration-200" href="#">Home</a>
          <svg class="w-3 h-3 mx-1 text-neutral-400" 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 5l7 7-7 7"></path>
          </svg>
          <a class="text-xs text-neutral-400 hover:text-white transition-colors duration-200" href="#">Blog</a>
          <svg class="w-3 h-3 mx-1 text-neutral-400" 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 5l7 7-7 7"></path>
          </svg>
          <a class="text-xs text-white" href="#">Article</a>
        </div>
        <h2 class="mb-6 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Lorem ipsum dolor sit amet consectutar</h2>
        <div class="flex items-center justify-center">
          <div class="mr-4">
            <div class="w-16 h-16 rounded-full p-1 border border-white border-opacity-20">
              <img class="w-full h-full object-cover rounded-full" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=8&amp;w=300&amp;h=300&amp;q=80" alt="">
            </div>
          </div>
          <div class="text-left">
            <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Danny Bailey</h3>

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Dark Blog Article Header with Breadcrumbs, Author, and Hero Image

A dark-themed blog article layout showing breadcrumb navigation, a large serif-free heading, author avatar with name and date, a laptop code-editor hero image on the right, and a centered body text column. The layout places title and author on the left beside a bordered image panel, followed by readable paragraphs.

Tailwind Component #42

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full md:w-3/5 px-4 mb-8 md:mb-0">
        <div class="flex items-center">
          <span class="mr-6">
            <svg class="text-white w-14 h-14" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
              <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
            </svg>
          </span>
          <div>
            <h3 class="mb-2 text-3xl lg:leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Sign up to our newsletter</h3>
            <p class="text-neutral-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-2/5 px-4">
        <form action="#">
              <div class="group flex md:max-w-lg md:ml-auto p-1 border border-white border-opacity-20  border border-neutral-700 hover:border-neutral-600 transition-all duration-200 transition-all rounded-md">
              <input type="email" class="block w-full px-4 py-3 text-sm text-neutral-300 placeholder-neutral-400 font-semibold bg-neutral-800 border border-neutral-700 group-hover:border-neutral-600 focus:border-neutral-600 transition-all duration-200 transition-all rounded-l focus:outline-none focus:border-white transition-colors duration-200" placeholder="E-mail">
              <button class="block py-3 px-2 rounded-r bg-neutral-800 border border-l-0 border-neutral-700 border border-neutral-700 group-hover:border-neutral-600 hover:bg-neutral-900 hover:bg-opacity-10 px-5 py-3 text-sm font-semibold text-white transition-all duration-200">
              Action
              </button>

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Dark Newsletter Signup Banner with Email Input

A horizontal dark-themed newsletter signup section with a circular icon, heading, supporting text on the left, and an email input paired with an Action button on the right. The layout is a single row with a minimal, outlined input group.

Tailwind Component #43

Tailwind CSS

DarkPro

<section class="relative py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="w-full lg:w-1/2 mb-12">
      <div class="lg:max-w-md">
        <div class="max-w-md mx-auto text-center py-10">
          <span class="text-sm text-neutral-400 font-medium uppercase">Sign Up</span>
          <h3 class="mb-8 text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Create new account</h3>
          <div class="flex">
            <input class="w-1/2 mr-2 py-3 pl-3 mb-4 bg-neutral-800 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="text" placeholder="First Name">
            <input class="w-1/2 py-3 pl-3 mb-4 bg-neutral-800 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="text" placeholder="Last Name">
          </div>
          <input class="w-full py-3 pl-3 mb-4 bg-neutral-800 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="email" placeholder="E-mail address">
          <input class="w-full py-3 pl-3 mb-4 bg-neutral-800 border border-neutral-700 hover:border-neutral-600 focus:border-white focus:border-neutral-400 text-white placeholder-neutral-400 rounded-lg transition duration-200 focus:outline-none" type="password" placeholder="Password">
          <label class="inline-block mb-4">
            <input class="mr-2 accent-white" type="checkbox" name="terms" value="1">
            <span class="text-sm text-neutral-300">By signing up, you agree to our <a class="font-semibold text-white hover:text-neutral-300 transition-colors duration-200" href="#">Terms, Data Policy</a> and <a class="font-semibold text-white hover:text-neutral-300 transition-colors duration-200" href="#">Cookies Policy</a>.</span>
          </label>
          <button class="inline-flex items-center justify-center w-full mb-4 px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group">
            Sign Up
            <svg class="ml-2 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </button>
          <p class="text-sm text-neutral-300">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #44

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
        <div class="container px-4 mx-auto">
            <div class="mb-12 text-center">
                <span class="text-sm text-neutral-300 font-medium">Lorem ipsum</span>
                <h2 class="mt-2 text-3xl lg:leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Frequently Asked Questions</h2>
            </div>
            <div class="relative max-w-4xl mx-auto">
                <div class="absolute inset-0 opacity-10 bg-gradient-to-r from-purple-950 via-purple-900 to-purple-950 rounded-full filter blur-3xl"></div>
                <ul class="relative space-y-4">
                    <li class="p-1 border border-white border-opacity-20 rounded-2xl group hover:border-opacity-30 transition-all duration-200">
                        <div class="px-6 py-8 bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 rounded-xl hover:border-opacity-30 transition-all duration-200" x-data="{ accordion: false }">
                            <button class="group w-full flex justify-between items-center text-left font-bold font-heading" x-on:click="accordion = !accordion">
                                <span class="group-hover:text-white text-lg font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 transition-colors duration-200">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
                                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform transition-transform duration-200">
                                    <svg class="flex-shrink-0 w-4 h-4 ml-2 text-white" 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="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </span>
                            </button>
                            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 transition-all duration-500">
                                <p class="max-w-2xl mt-4 text-lg text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
                            </div>
                        </div>
                    </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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #45

Tailwind CSS

DarkPro

<footer class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto text-center">
    <a class="inline-block mx-auto flex items-center justify-center text-white text-2xl leading-none font-semibold" href="#">
      <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center mr-3">
        <span class="text-neutral-950 font-medium text-sm">D</span>
      </div>
      <span class="text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-300 to-gray-100">DarkPro</span>
    </a>
    <ul class="my-8 flex flex-wrap items-center justify-center">
      <li class="mb-2 md:mb-0 mx-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">About</a></li>
      <li class="mb-2 md:mb-0 mx-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Company</a></li>
      <li class="mb-2 md:mb-0 mx-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Services</a></li>
      <li class="mb-2 md:mb-0 mx-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Testimonials</a></li>
    </ul>
    <div class="flex items-center justify-center space-x-6">
      <a class="inline-block p-3 rounded-full border border-neutral-700 hover:border-white hover:border-opacity-50 transition-all duration-200 group" href="#">
        <svg class="w-5 h-5 text-neutral-400 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
        </svg>
      </a>
      <a class="inline-block p-3 rounded-full border border-neutral-700 hover:border-white hover:border-opacity-50 transition-all duration-200 group" href="#">
        <svg class="w-5 h-5 text-neutral-400 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"></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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #46

Tailwind CSS

DarkPro

<section class="bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950 py-20">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
                <div class="max-w-xl">
                    <span class="block text-sm text-neutral-400 font-medium mb-4">Lorem Ipsum</span>
                    <h2 class="text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 mb-4">Lorem ipsum dolor sit amet massa</h2>
                    <p class="text-lg leading-relaxed text-neutral-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
                </div>
            </div>
            <div class="w-full lg:w-1/2 px-4">
                <div class="lg:max-w-lg lg:ml-auto relative">
                    <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-800 via-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
                    <div class="relative p-1 border border-white border-opacity-20 rounded-2xl">
                        <div class="py-8 px-10 bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 text-center rounded-xl">
                            <h3 class="mb-2 text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Sign up to our newsletter</h3>
                            <p class="mb-4 text-neutral-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <form action="#">
                                <input class="mb-4 w-full pl-3 py-3 bg-neutral-900 border border-neutral-700 hover:border-white hover:border-opacity-50 text-white placeholder-neutral-400 rounded-lg focus:outline-none focus:border-white focus:border-opacity-50 transition-all duration-200" type="email" placeholder="Type your e-mail">
                                <button class="w-full inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group">
                                    Action
                                    <svg class="ml-2 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #47

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950" x-data="{ activeSlide: 1, slideCount: 4 }">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg lg:max-w-2xl mx-auto text-center mb-12 lg:mb-16">
      <span class="text-sm text-neutral-300 font-medium">Lorem ipsum</span>
      <h2 class="mb-4 mt-4 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="text-lg leading-relaxed text-neutral-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="flex items-center justify-around">
      <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="flex-shrink-0 hidden md:block w-16 h-16 p-5 rounded-full border border-neutral-700 hover:border-white hover:border-opacity-50 transition-all duration-200 group">
        <svg class="text-neutral-400 group-hover:text-white transition-colors duration-200" 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="M15 19l-7-7 7-7"></path>
        </svg>
      </button>
      <div class="overflow-hidden pt-12">
        <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
          <div class="inline-block w-full whitespace-normal px-4">
            <div class="relative">
              <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-neutral-950 via-purple-900 to-neutral-950 rounded-2xl filter blur-3xl"></div>
              <div class="max-w-2xl mx-auto py-16 px-12 mb-6 lg:mb-12 bg-gradient-to-br from-purple-950 via-purple-800 to-purple-950 border border-white border-opacity-20 rounded-xl text-center">
                <div class="absolute inset-0 -mt-10">
                  <div class="w-20 h-20 mx-auto rounded-full p-px border border-white border-opacity-20 mb-6">
                    <img class="w-full h-full rounded-full object-cover" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=8&amp;w=300&amp;h=300&amp;q=80" alt="">
                  </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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #48

Tailwind CSS

DarkPro

<section x-data="{ mobileNavOpen: false }">
    <nav class="py-8 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
        <div class="container px-4 mx-auto relative">
            <div class="flex justify-between items-center">
                <a href="#">
                    <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
                </a>
                <div class="lg:hidden">
                    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block hover:text-white text-neutral-300 focus:outline-none transition-colors duration-200">
                        <svg class="h-6 w-6" fill="currentColor" 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 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 items-center w-auto space-x-8">
                    <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Product</a></li>
                    <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Solutions</a></li>
                    <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Resources</a></li>
                    <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Company</a></li>
                </ul>
                <div class="hidden lg:flex items-center justify-end gap-4">
                    <a class="inline-block px-4 py-2 text-sm font-semibold text-neutral-300 hover:text-white transition-all duration-200" href="#">Sign in</a>
                    <a class="inline-block px-4 py-2 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg" href="#">Sign up</a>

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #49

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
      <div class="container px-4 mx-auto">
        <div class="flex flex-wrap items-center -mx-4 2xl:-mx-12 mb-12">
          <h2 class="w-full lg:w-1/2 2xl:w-1/3 px-4 2xl:px-12 mb-4 lg:mb-0 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 mb-4">Lorem ipsum dolor sit amet massa</h2>
          <p class="w-full lg:w-1/2 2xl:w-2/3 2xl:max-w-xl px-4 2xl:px-12 text-lg leading-relaxed text-neutral-300">Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
        </div>
        <div class="relative flex flex-wrap mb-8 p-1 border border-white border-opacity-20 rounded-2xl">
          <div class="absolute inset-0 opacity-20 bg-gradient-to-b from-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
          <div class="relative w-full lg:w-2/3 p-12 bg-gradient-to-br from-neutral-950 via-neutral-800 to-neutral-950 rounded-t-xl lg:rounded-t-none lg:rounded-l-xl">
            <div class="max-w-md mb-12">
              <h2 class="mb-8 text-2xl md:text-4xl lg:leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Premium Membership</h2>
              <p class="text-neutral-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
            </div>
            <div class="max-w-xl">
              <ul class="flex flex-wrap text-left text-base lg:text-lg">
                <li class="w-full lg:w-1/2 mb-2 flex items-center">
                  <svg class="mr-2 w-6 h-6 text-white" 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>
                  <p class="text-neutral-300">Complete documentation</p>
                </li>
                <li class="w-full lg:w-1/2 mb-2 flex items-center">
                  <svg class="mr-2 w-6 h-6 text-white" 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>

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #50

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
    <div class="container px-4 mx-auto">
        <div class="h-96 mb-16 relative">
            <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
            <div class="p-1 border border-white border-opacity-20 rounded-2xl h-full">
                <img class="relative w-full h-full object-cover rounded-xl border border-neutral-800" src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxfHx0ZWNofGVufDB8fHx8MTc0ODkzNjgyOHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080" alt="">
            </div>
        </div>
        <div class="max-w-2xl mx-auto text-center">
            <div class="flex mb-4 items-center justify-center">
                <a class="text-xs text-neutral-400 hover:text-white transition-colors duration-200" href="#">Home</a>
                <svg class="w-3 h-3 mx-1 text-neutral-400" 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 5l7 7-7 7"></path>
                </svg>
                <a class="text-xs text-neutral-400 hover:text-white transition-colors duration-200" href="#">Blog</a>
                <svg class="w-3 h-3 mx-1 text-neutral-400" 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 5l7 7-7 7"></path>
                </svg>
                <a class="text-xs text-white" href="#">Article</a>
            </div>
            <h2 class="mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Lorem ipsum dolor sit amet consectutar domor</h2>
            <div class="flex items-center justify-center">
                <div class="mr-4">
                    <div class="w-16 h-16 rounded-full p-1 border border-white border-opacity-20">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #51

Tailwind CSS

DarkPro

<div class="fixed bottom-0 left-0 z-50 p-8" x-data="{ open: true }" :class="{ 'hidden': !open }">
    <div class="w-full lg:max-w-3xl">
        <div class="relative">
            <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-900 to-purple-950 rounded-2xl filter blur-3xl"></div>
            <div class="relative p-1 border border-white border-opacity-20 rounded-2xl">
                <div class="p-8 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950 border border-white border-opacity-20 rounded-xl">
                    <div class="flex flex-wrap items-center -mx-4">
                        <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
                            <h3 class="mb-2 text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Cookie Policy</h3>
                            <p class="text-neutral-300 leading-relaxed">We use cookies to personalise content, to provide social media features and to analyse our traffic.</p>
                        </div>
                        <div class="w-full lg:w-1/3 px-4 lg:text-center">
                            <a x-on:click.prevent="open=false" class="inline-flex items-center justify-center px-5 py-3 mr-3 mb-3 md:mb-0 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group" href="#">
                                Allow
                            </a>
                            <a x-on:click.prevent="open=false" class="inline-flex items-center justify-center px-5 py-3 text-sm font-semibold text-white hover:text-white border border-neutral-700 hover:border-white hover:border-opacity-50 rounded-full transition-all duration-200" href="#">
                                Decline
                            </a>
                        </div>
                    </div>
                </div>
            </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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #52

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
    <div class="container px-4 mx-auto text-center">
        <div class="relative">
            <span class="text-sm text-neutral-400 font-medium">Error 404</span>
            <h2 class="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Page not found</h2>
            <p class="mb-8 text-lg leading-relaxed text-neutral-300 max-w-xl mx-auto">Sorry! We are unable to find the page you are looking for.</p>
            <div class="relative flex flex-col sm:flex-row gap-4 justify-center">
                <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-600 to-purple-950 rounded-2xl filter blur-3xl"></div>
                <a class="relative inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group" href="#">
                    Try for Free
                    <svg class="transform ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </a>
                <a class="relative inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-white hover:text-white border border-neutral-700 hover:border-white hover:border-opacity-50 rounded-full transition-all duration-200" 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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #53

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-xl lg:max-w-3xl mx-auto text-center mb-12">
      <span class="text-sm text-neutral-400 font-medium">New Feature</span>
      <h2 class="mb-4 mt-4 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Take quick action that increases your brand's regular profit.</h2>
      <p class="text-lg leading-relaxed text-neutral-300 mb-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div class="relative">
        <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
        <a class="relative inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group" href="#">
          Try Demo
          <svg class="ml-2 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-6">
      <div class="w-full lg:w-1/3 px-4 mb-6">
        <div class="p-1 border border-white border-opacity-20 rounded-2xl transition-all duration-200">
          <div class="bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 text-center p-8 pb-10 rounded-xl">
            <span>
              <svg class="w-12 h-12 mx-auto mb-3 text-white" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
                <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #54

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
        <div class="container px-4 mx-auto">
            <div class="max-w-xl mx-auto mb-12 text-center">
                <span class="block text-sm text-neutral-400 font-medium mb-4">Trusted by leading companies</span>
                <h2 class="text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Join thousands of teams worldwide</h2>
            </div>
            <div class="max-w-5xl mx-auto">
                <div class="relative flex flex-wrap justify-center -m-4 -mx-6">
                    <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
                    <div class="w-1/2 md:w-1/3 lg:w-1/5 p-4 px-6">
                        <img class="mx-auto h-8 filter brightness-0 invert" src="darkpro-assets/logos/jiggle-color.svg" alt="">
                    </div>
                    <div class="w-1/2 md:w-1/3 lg:w-1/5 p-4 px-6">
                        <img class="mx-auto h-8 filter brightness-0 invert" src="darkpro-assets/logos/symtric-color.svg" alt="">
                    </div>
                    <div class="w-1/2 md:w-1/3 lg:w-1/5 p-4 px-6">
                        <img class="mx-auto h-8 filter brightness-0 invert" src="darkpro-assets/logos/wishelp-color.svg" alt="">
                    </div>
                    <div class="w-1/2 md:w-1/3 lg:w-1/5 p-4 px-6">
                        <img class="mx-auto h-8 filter brightness-0 invert" src="darkpro-assets/logos/resecurb-color.svg" alt="">
                    </div>
                    <div class="w-1/2 md:w-1/3 lg:w-1/5 p-4 px-6">
                        <img class="mx-auto h-8 filter brightness-0 invert" src="darkpro-assets/logos/jiggle-color.svg" alt="">
                    </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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #55

Tailwind CSS

DarkPro

<section class="bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950 py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="w-full lg:w-1/2 p-4 relative">
        <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
        <div class="relative p-1 border border-white border-opacity-20 rounded-2xl transition-all duration-200">
            <div class="p-6 md:p-12 bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 rounded-xl">
              <span class="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-white text-neutral-950 font-medium text-2xl font-heading group-hover:shadow-lg transition-all duration-200">1</span>
              <h3 class="mb-4 text-3xl md:text-4xl md:leading-tight lg:text-5xl font-medium font-heading text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
              <p class="text-lg text-neutral-300 leading-relaxed">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
            </div>
          </div>
      </div>
      <div class="w-full lg:w-1/2 p-4 relative">
        <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
        <div class="relative p-1 border border-white border-opacity-20 rounded-2xl transition-all duration-200">
          <div class="p-6 md:p-12 bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 rounded-xl">
            <span class="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-white text-neutral-950 font-medium text-2xl font-heading group-hover:shadow-lg transition-all duration-200">2</span>
            <h3 class="mb-4 text-3xl md:text-4xl md:leading-tight lg:text-5xl font-medium font-heading text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
            <p class="text-lg text-neutral-300 leading-relaxed">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4 relative">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #56

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
        <div class="container px-4 mx-auto">
            <div class="flex flex-wrap items-center -mx-4 -mb-8">
                <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
                    <h3 class="mb-1 text-5xl lg:text-6xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-500 transition-all duration-200 hover:from-white hover:via-gray-100 hover:to-white">4,536</h3>
                    <p class="text-lg text-neutral-300">Dolor sit amet consectutar</p>
                </div>
                <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
                    <h3 class="mb-1 text-5xl lg:text-6xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-500 transition-all duration-200 hover:from-white hover:via-gray-100 hover:to-white">356</h3>
                    <p class="text-lg text-neutral-300">Dolor sit amet consectutar</p>
                </div>
                <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
                    <h3 class="mb-1 text-5xl lg:text-6xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-500 transition-all duration-200 hover:from-white hover:via-gray-100 hover:to-white">1,053</h3>
                    <p class="text-lg text-neutral-300">Dolor sit amet consectutar</p>
                </div>
                <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
                    <h3 class="mb-1 text-5xl lg:text-6xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-500 transition-all duration-200 hover:from-white hover:via-gray-100 hover:to-white">4,431</h3>
                    <p class="text-lg text-neutral-300">Dolor sit amet consectutar</p>
                </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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #57

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="relative">
          <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-xl filter blur-xl"></div>
          <div class="p-1 border border-white border-opacity-20 rounded-2xl">
              <img class="relative object-cover w-full rounded-xl border border-neutral-800" src="https://images.unsplash.com/photo-1702471897388-5d9c50ea434e?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwzMXx8d29ya3xlbnwwfDJ8fHwxNzQ4OTYzODEzfDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;h=640&amp;w=640" alt="">
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="lg:max-w-md lg:mx-auto">
          <h2 class="mb-12 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Frequent authentication</h2>
          <div class="flex mb-10">
            <div class="flex-shrink-0 mr-5 text-white">
              <svg class="text-white w-10 h-10" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
                <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
              </svg>
            </div>
            <div class="max-w-sm">
              <h3 class="mb-2 -mt-1 text-xl md:text-2xl font-medium text-white">Quick problem-solving contact</h3>
              <p class="text-neutral-300 leading-relaxed">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #58

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg lg:max-w-2xl mx-auto mb-16 text-center">
      <span class="text-sm text-neutral-300 font-medium">Lorem ipsum</span>
      <h2 class="mb-4 mt-4 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="text-lg leading-relaxed text-neutral-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-12 lg:mb-16">
        <div class="flex flex-wrap -mx-4 group p-4 rounded-xl transition-all duration-200">
          <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
            <div class="">
              <div class="relative">
                <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
                <div class="p-1 relative bg-neutral-900 border border-white border-opacity-20 rounded-lg">
                  <img class="relative w-full h-80 lg:h-36 object-cover rounded-md border border-neutral-800" src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxfHx0ZWNofGVufDB8fHx8MTc0ODkzNjgyOHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080" alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="w-full lg:w-2/3 px-4">
            <span class="text-xs font-medium text-neutral-400">10 jun 2025 19:40</span>
            <h2 class="mt-2 mb-2 text-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Lorem ipsum dolor sit</h2>
            <p class="mb-4 text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #59

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between">
      <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="flex-shrink-0 hidden lg:block w-16 h-16 p-5 mr-5 rounded-full border border-neutral-700 hover:border-white hover:border-opacity-50 transition-all duration-200 group">
        <svg class="text-neutral-400 group-hover:text-white transition-colors duration-200" 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="M15 19l-7-7 7-7"></path>
        </svg>
      </button>
      <div class="overflow-hidden">
          <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
              <div class="inline-block w-full whitespace-normal">
                  <div class="max-w-2xl mx-auto text-center">
                    <span class="text-sm text-neutral-400 font-medium">Customer Stories</span>
                    <div class="relative mt-4">
                      <div class="absolute inset-0 opacity-20 bg-gradient-to-b from-neutral-950 via-purple-900 to-neutral-950 rounded-2xl filter blur-3xl"></div>
                      <h2 class="mb-6 text-3xl md:text-4xl md:leading-tight lg:text-5xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Build products that users will really love</h2>
                      <p class="mb-8 text-base lg:text-xl lg:leading-relaxed text-neutral-300">Transform your workflow with our intuitive platform designed for high-performing teams. Ship faster, collaborate better, and scale with confidence of a professional.</p>
                    </div>
                    <div class="mb-2 w-16 h-16 rounded-full p-px border border-white border-opacity-20 mx-auto">
                      <img class="rounded-full w-full h-full object-cover" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=8&amp;w=300&amp;h=300&amp;q=80" alt="">
                    </div>
                    <p class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Danny Bailey</p>
                    <p class="text-neutral-400">CEO &amp; Founder</p>
                    <div class="lg:hidden mt-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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #60

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto mb-16">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/3 px-4 text-center p-4">
        <svg class="mx-auto mb-4 text-white" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
          <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
        </svg>
        <p class="text-lg text-neutral-300">1686, Geraldine Lane</p>
        <p class="text-lg text-neutral-300">New York, NY 10013</p>
      </div>
      <div class="w-full md:w-1/3 px-4 text-center p-4">
        <svg class="mx-auto mb-4 text-white" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
          <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
        </svg>
        <p class="text-lg text-neutral-300">hello@shuffle.dev</p>
      </div>
      <div class="w-full md:w-1/3 px-4 text-center p-4">
        <svg class="mx-auto mb-4 text-white" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
          <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
        </svg>
        <p class="text-lg text-neutral-300">+7-843-672-431</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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

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 – Darkpro Library

Framework

UI Library

Components

Tailwind Component #41

Get the code for 13,400+ components

Dark Blog Article Header with Breadcrumbs, Author, and Hero Image

Tailwind Component #42

Get the code for 13,400+ components

Dark Newsletter Signup Banner with Email Input

Tailwind Component #43

Get the code for 13,400+ components

Tailwind Component #44

Get the code for 13,400+ components

Tailwind Component #45

Get the code for 13,400+ components

Tailwind Component #46

Get the code for 13,400+ components

Tailwind Component #47

Get the code for 13,400+ components

Tailwind Component #48

Get the code for 13,400+ components

Tailwind Component #49

Get the code for 13,400+ components

Tailwind Component #50

Get the code for 13,400+ components

Tailwind Component #51

Get the code for 13,400+ components

Tailwind Component #52

Get the code for 13,400+ components

Tailwind Component #53

Get the code for 13,400+ components

Tailwind Component #54

Get the code for 13,400+ components

Tailwind Component #55

Get the code for 13,400+ components

Tailwind Component #56

Get the code for 13,400+ components

Tailwind Component #57

Get the code for 13,400+ components

Tailwind Component #58

Get the code for 13,400+ components

Tailwind Component #59

Get the code for 13,400+ components

Tailwind Component #60

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

From one prompt to production‑ready code

Products

Extensions

UI Components

Company

Support