UI Components in Darkpro library

Tailwind Component #1

<section x-data="{ mobileNavOpen: false }" class="bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
    <div class="container px-4 mx-auto">
        <nav class="flex justify-between items-center py-8">
            <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 ml-auto mr-8 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>
            <a class="hidden lg: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="#">Get Started</a>
        </nav>
        
        <div class="flex flex-wrap items-center -mx-4 mt-8 lg:mt-12 pb-20">
            <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
                <div class="mb-6">
                    <span class="text-sm text-neutral-400 font-medium">Frequent authentication</span>
                </div>
                
                <h1 class="max-w-2xl mb-6 text-4xl md:text-5xl lg:text-6xl font-medium leading-none 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
                </h1>
                
                <p class="max-w-xl mb-10 text-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 class="flex flex-col sm:flex-row gap-4">
                    <a class="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="#">
                        Get Started
                        <svg class="ml-1 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>
                    <a class="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="#">
                        Watch Demo
                    </a>
                </div>
                
                <div class="flex items-center space-x-6 mt-12">
                    <div class="text-sm text-neutral-400">
                        Trusted by 50,000+ teams
                    </div>
                    <div class="flex -space-x-2">
                        <div class="w-8 h-8 rounded-full p-px border border-white border-opacity-20 -ml-2">
                            <img 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="" class="rounded-full">
                        </div>
                        <div class="w-8 h-8 rounded-full p-px border border-white border-opacity-20">
                            <img src="https://images.unsplash.com/photo-1595152452543-e5fc28ebc2b8?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHw2fHxmYWNlfGVufDB8Mnx8fDE3NDg4OTE1NTh8MA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080&amp;w=450" alt="" class="rounded-full">
                        </div>
                        <div class="w-8 h-8 rounded-full p-px border border-white border-opacity-20">
                            <img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxOXx8ZmFjZXxlbnwwfDJ8fHwxNzQ4ODkxNTc4fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080&amp;w=450" alt="" class="rounded-full">
                        </div>
                        <div class="w-8 h-8 rounded-full p-px border border-white border-opacity-20">
                            <img src="https://images.unsplash.com/photo-1506464253090-7af30fe60a71?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=300&amp;h=300&amp;q=80" alt="" class="rounded-full">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="w-full lg:w-1/2 px-4">
                <div class="relative">
                    <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></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-1524749292158-7540c2494485?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxM3x8Y29tcHV0ZXIlMjB3b3JrfGVufDB8fHx8MTc0ODkzNjgyOHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080&amp;w=850" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gradient-to-br from-neutral-950 via-neutral-900 to-neutral-950 opacity-75 filter blur-3xl"></div>
        <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-neutral-900 border-r border-neutral-800 overflow-y-auto">
            <div class="flex items-center mb-12">
                <a href="#" class="mr-auto">
                    <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg class="h-6 w-6 cursor-pointer hover:text-white text-neutral-400 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="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <div>
                <ul>
                    <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Product</a></li>
                    <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Solutions</a></li>
                    <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Resources</a></li>
                    <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Company</a></li>
                </ul>
            </div>
            <div class="mt-auto">
                <div class="pt-6">
                    <a class="block px-6 py-3 text-sm text-center font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-lg transition-all duration-200" href="#">Get Started</a>
                </div>
                <p class="mt-6 mb-4 text-sm text-center text-neutral-500">
                    <span>© 2025 All rights reserved.</span>
                </p>
            </div>
        </nav>
    </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Tailwind Component #2

Tailwind CSS

DarkPro

<section class="relative pb-8 overflow-y-hidden bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="hidden lg:block absolute top-0 left-0 bottom-0 w-2/5">
    <div class="relative h-full">
      <div class="absolute inset-0 opacity-20 bg-gradient-to-br from-purple-400 to-purple-900 rounded-2xl filter blur-3xl"></div>
      <div class="pr-1 pb-1 border border-white border-opacity-20 h-full rounded-br-2xl">
        <img class="relative object-cover w-full h-full border-r border-neutral-800 rounded-br-xl" src="https://images.unsplash.com/photo-1535957998253-26ae1ef29506?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxfHx3b3JrfGVufDB8MXx8fDE3NTAwNjA4NTV8MA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=960" alt="">
      </div>
    </div>
  </div>
  <div class="relative container px-4 mx-auto">
    <div class="w-full lg:w-3/5 lg:pl-16 ml-auto mb-12">
      <nav class="flex justify-between items-center py-8">
          <a href="#" class="lg:hidden">
              <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
          </a>
          <div class="lg:hidden ml-auto">
            <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 mr-auto mr-8 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>
          <a class="hidden lg:block lg:ml-auto 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="#">Get Started</a>
      </nav>
      <div class="mt-10 lg:mt-20 mb-16 lg:mb-20 max-w-xl">
        <div class="mb-6">
            <span class="text-sm text-neutral-400 font-medium">Frequent authentication</span>
        </div>
        
        <h1 class="mb-6 text-4xl md:text-5xl lg:text-6xl font-medium leading-none 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
        </h1>
        
        <p class="mb-10 text-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 class="relative flex flex-col sm:flex-row gap-4">
            <div class="lg:hidden absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-900 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="#">
                Get Started
                <svg class="ml-1 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>
            <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="#">
                Watch Demo
            </a>
        </div>
      </div>
      <div class="flex flex-wrap justify-center lg:justify-start -m-4 -mx-6">
        <div class="w-1/2 md:w-1/4 p-4 px-6">
            <img class="mx-auto sm:mx-0 h-8 filter brightness-0 invert" src="darkpro-assets/logos/jiggle-color.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/4 p-4 px-6">
            <img class="mx-auto sm:mx-0 h-8 filter brightness-0 invert" src="darkpro-assets/logos/symtric-color.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/4 p-4 px-6">
            <img class="mx-auto sm:mx-0 h-8 filter brightness-0 invert" src="darkpro-assets/logos/wishelp-color.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/4 p-4 px-6">
            <img class="mx-auto sm:mx-0 h-8 filter brightness-0 invert" src="darkpro-assets/logos/resecurb-color.svg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
      <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gradient-to-br from-neutral-950 via-neutral-900 to-neutral-950 opacity-75 filter blur-3xl"></div>
      <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-neutral-900 border-r border-neutral-800 overflow-y-auto">
          <div class="flex items-center mb-12">
            <a href="#" class="mr-auto">
                <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
            </a>
            <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg class="h-6 w-6 cursor-pointer hover:text-white text-neutral-400 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="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
          </div>
          <div>
              <ul>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Product</a></li>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Solutions</a></li>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Resources</a></li>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Company</a></li>
              </ul>
          </div>
          <div class="mt-auto">
              <div class="pt-6">
                  <a class="block px-6 py-3 text-sm text-center font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-lg transition-all duration-200" href="#">Get Started</a>
              </div>
              <p class="mt-6 mb-4 text-sm text-center text-neutral-500">
                  <span>© 2025 All rights reserved.</span>
              </p>
          </div>
      </nav>
  </div>
</section>

Tailwind Component #3

Tailwind CSS

DarkPro

<section class="bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-8">
        <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 ml-auto mr-8 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>
        <a class="hidden lg: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="#">Get Started</a>
    </nav>
    <div class="relative pt-12 md:pt-16 pb-20">
      <div class="max-w-2xl mb-16 mx-auto text-center">
          <div class="mb-6">
              <span class="text-sm text-neutral-400 font-medium">Frequent authentication</span>
          </div>
          
          <h1 class="mb-6 text-4xl md:text-5xl lg:text-6xl font-medium leading-none 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
          </h1>
          
          <p class="mb-10 text-lg leading-relaxed text-neutral-300">
              Transform your workflow with our intuitive platform designed for high performing teams. Ship faster, collaborate better, and scale.
          </p>
          
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
              <a class="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="#">
                  Get Started
                  <svg class="ml-1 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>
              <a class="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="#">
                  Watch Demo
              </a>
          </div>
      </div>
      <div class="relative max-w-3xl mx-auto">
        <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">
          <img class="relative object-cover w-full h-64 lg:h-96 rounded-xl border border-neutral-800" src="https://images.unsplash.com/photo-1524749292158-7540c2494485?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxM3x8Y29tcHV0ZXIlMjB3b3JrfGVufDB8fHx8MTc0ODkzNjgyOHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080&amp;w=850" alt="">
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
      <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gradient-to-br from-neutral-950 via-neutral-900 to-neutral-950 opacity-75 filter blur-3xl"></div>
      <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-neutral-900 border-r border-neutral-800 overflow-y-auto">
          <div class="flex items-center mb-12">
            <a href="#" class="mr-auto">
                <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
            </a>
            <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg class="h-6 w-6 cursor-pointer hover:text-white text-neutral-400 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="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
          </div>
          <div>
              <ul>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Product</a></li>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Solutions</a></li>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Resources</a></li>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Company</a></li>
              </ul>
          </div>
          <div class="mt-auto">
              <div class="pt-6">
                  <a class="block px-6 py-3 text-sm text-center font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-lg transition-all duration-200" href="#">Get Started</a>
              </div>
              <p class="mt-6 mb-4 text-sm text-center text-neutral-500">
                  <span>© 2025 All rights reserved.</span>
              </p>
          </div>
      </nav>
  </div>
</section>

Tailwind Component #4

Tailwind CSS

DarkPro

<section class="pb-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950 pb-8" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="relative flex justify-between items-center py-8">
      <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 absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex ml-auto mr-auto items-center w-auto space-x-12">
        <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">About</a></li>
        <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Company</a></li>
        <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Services</a></li>
        <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Testimonials</a></li>
      </ul>
      <ul class="hidden lg:flex 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="#">Sign in</a></li>
        <li><a class="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></li>
      </ul>
    </nav>
    <div class="max-w-3xl mx-auto text-center mt-16 mb-24">
      <span class="text-sm text-neutral-400 font-medium">Develop your skill</span>
      <h2 class="mb-8 mt-2 text-4xl md:text-5xl lg:text-6xl font-medium leading-none 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>
      <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 for Free
          <svg class="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>
      </div>
    </div>
    <div class="flex flex-wrap -mx-8 -mb-12">
      <div class="w-full md:w-1/2 lg:w-1/3 px-8 mb-12">
        <div class="flex">
          <span class="mr-6">
            <svg class="text-white w-12 h-12" 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-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Security in saving</h3>
            <p class="text-neutral-300">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-8 mb-12">
        <div class="flex">
          <span class="mr-6">
            <svg class="text-white w-12 h-12" 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-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">No errors</h3>
            <p class="text-neutral-300">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-8 mb-12">
        <div class="flex">
          <span class="mr-6">
            <svg class="text-white w-12 h-12" 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-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Change of access</h3>
            <p class="text-neutral-300">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
      <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gradient-to-br from-neutral-950 via-neutral-900 to-neutral-950 opacity-75 filter blur-3xl"></div>
      <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-neutral-900 border-r border-neutral-800 overflow-y-auto">
          <div class="flex items-center mb-12">
            <a href="#" class="mr-auto">
                <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
            </a>
            <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg class="h-6 w-6 cursor-pointer hover:text-white text-neutral-400 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="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
          </div>
          <div>
              <ul>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Product</a></li>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Solutions</a></li>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Resources</a></li>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Company</a></li>
              </ul>
          </div>
          <div class="mt-auto">
              <div class="pt-6">
                  <a class="block px-6 py-3 text-sm text-center font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-lg transition-all duration-200" href="#">Get Started</a>
              </div>
              <p class="mt-6 mb-4 text-sm text-center text-neutral-500">
                  <span>© 2025 All rights reserved.</span>
              </p>
          </div>
      </nav>
  </div>
</section>

Tailwind Component #5

Tailwind CSS

DarkPro

<section class="relative bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950 overflow-x-hidden" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="relative flex justify-between items-center py-8">
      <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 absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex ml-auto mr-auto items-center w-auto space-x-12">
        <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">About</a></li>
        <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Company</a></li>
        <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Services</a></li>
        <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Testimonials</a></li>
      </ul>
      <ul class="hidden lg:flex 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="#">Sign in</a></li>
        <li><a class="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></li>
      </ul>
    </nav>
    <div class="mt-20 lg:mb-24">
      <div class="max-w-lg mb-6">
          <h1 class="mb-6 text-4xl md:text-5xl lg:text-6xl font-medium leading-none 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
          </h1>
          
          <p class="mb-10 text-lg leading-relaxed text-neutral-300">
              Transform your workflow with our intuitive platform designed for high-performing teams.
          </p>
          <form action="#">
            <div class="group flex md:max-w-md 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>
            </div>
          </form>
      </div>
    </div>
  </div>
  <div class="lg:absolute lg:right-0 lg:top-1/2 mt-16 lg:mt-4 lg:-mr-8 lg:transform lg:-translate-y-1/2 w-full lg:w-1/2 px-4 pb-16 lg:pb-0">
    <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="p-1 border border-white border-opacity-20 rounded-2xl">
        <img class="relative mx-auto lg:mx-0 lg:ml-auto w-full h-80 lg:h-96 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>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
      <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gradient-to-br from-neutral-950 via-neutral-900 to-neutral-950 opacity-75 filter blur-3xl"></div>
      <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-neutral-900 border-r border-neutral-800 overflow-y-auto">
          <div class="flex items-center mb-12">
            <a href="#" class="mr-auto">
                <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
            </a>
            <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg class="h-6 w-6 cursor-pointer hover:text-white text-neutral-400 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="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
          </div>
          <div>
              <ul>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Product</a></li>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Solutions</a></li>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Resources</a></li>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Company</a></li>
              </ul>
          </div>
          <div class="mt-auto">
              <div class="pt-6">
                  <a class="block px-6 py-3 text-sm text-center font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-lg transition-all duration-200" href="#">Get Started</a>
              </div>
              <p class="mt-6 mb-4 text-sm text-center text-neutral-500">
                  <span>© 2025 All rights reserved.</span>
              </p>
          </div>
      </nav>
  </div>
</section>

Tailwind Component #6

Tailwind CSS

DarkPro

<section class="bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950 pb-24" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="relative flex justify-between items-center py-8">
      <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 absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex ml-auto mr-auto items-center w-auto space-x-12">
        <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">About</a></li>
        <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Company</a></li>
        <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Services</a></li>
        <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Testimonials</a></li>
      </ul>
      <ul class="hidden lg:flex 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="#">Sign in</a></li>
        <li><a class="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></li>
      </ul>
    </nav>
    <div class="mt-16">
      <div class="container px-4 mx-auto">
        <div class="max-w-2xl mb-16 mx-auto text-center">
            <div class="mb-6">
                <span class="text-sm text-neutral-400 font-medium">Frequent authentication</span>
            </div>
            
            <h1 class="mb-6 text-4xl md:text-5xl lg:text-6xl font-medium leading-none 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
            </h1>
            
            <p class="mb-10 text-lg leading-relaxed text-neutral-300">
                Transform your workflow with our intuitive platform designed for high performing teams. Ship faster, collaborate better, and scale.
            </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-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="#">
                    Get Started
                    <svg class="ml-1 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>
                <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>
          <button class="block mx-auto w-16 h-16 p-3 rounded-full border border-neutral-600 hover:border-white hover:border-opacity-50 transition-all duration-200 group">
            <svg class="mx-auto text-neutral-400 group-hover:text-white transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
            </svg>
          </button>
          <span class="block text-center mt-3 text-sm font-medium text-neutral-400">Watch Demo</span>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
      <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gradient-to-br from-neutral-950 via-neutral-900 to-neutral-950 opacity-75 filter blur-3xl"></div>
      <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-neutral-900 border-r border-neutral-800 overflow-y-auto">
          <div class="flex items-center mb-12">
            <a href="#" class="mr-auto">
                <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
            </a>
            <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg class="h-6 w-6 cursor-pointer hover:text-white text-neutral-400 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="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
          </div>
          <div>
              <ul>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Product</a></li>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Solutions</a></li>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Resources</a></li>
                  <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Company</a></li>
              </ul>
          </div>
          <div class="mt-auto">
              <div class="pt-6">
                  <a class="block px-6 py-3 text-sm text-center font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-lg transition-all duration-200" href="#">Get Started</a>
              </div>
              <p class="mt-6 mb-4 text-sm text-center text-neutral-500">
                  <span>© 2025 All rights reserved.</span>
              </p>
          </div>
      </nav>
  </div>
</section>

Tailwind Component #7

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">
                    <svg class="mx-auto mb-4 text-white w-12 h-12" 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>
                    <h3 class="mb-1 text-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-500 via-gray-100 to-gray-500">600 000 000</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">
                    <svg class="mx-auto mb-4 text-white w-12 h-12" 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>
                    <h3 class="mb-1 text-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-500 via-gray-100 to-gray-500">600 000 000</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">
                    <svg class="mx-auto mb-4 text-white w-12 h-12" 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>
                    <h3 class="mb-1 text-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-500 via-gray-100 to-gray-500">600 000 000</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">
                    <svg class="mx-auto mb-4 text-white w-12 h-12" 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>
                    <h3 class="mb-1 text-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-500 via-gray-100 to-gray-500">600 000 000</h3>
                    <p class="text-lg text-neutral-300">Dolor sit amet consectutar</p>
                </div>
            </div>
        </div>
    </section>

Tailwind Component #8

Tailwind CSS

DarkPro

<section class="relative py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="absolute top-0 left-0 lg:bottom-0 py-64 lg:py-0 lg:h-auto w-full lg:w-7/12 bg-gradient-to-br from-purple-950 via-purple-800 to-purple-950 opacity-60"></div>
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-7/12 px-4 mb-12 lg:mb-0">
        <div class="max-w-lg py-20 lg:py-32">
          <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">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="text-base lg:text-xl 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="relative w-full lg:w-5/12 px-4">
        <div class="lg:absolute lg:top-1/2 lg:left-0 lg:-ml-10 -mt-16 lg:-mt-0 lg:transform lg:-translate-y-1/2">
          <div class="absolute max-w-md inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-2xl filter blur-2xl"></div>
          <div class="relative lg:max-w-md p-1 border border-white border-opacity-20 rounded-2xl">
            <div class="p-6 md:p-8 bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-900 border border-white border-opacity-20 rounded-xl text-center">
              <form action="#">
                <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>
                <input class="w-full py-3 px-4 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 px-4 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">
                <input class="w-full py-3 px-4 mb-6 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="Repeat password">
                <label class="inline-block mb-6 text-left">
                  <input class="mr-3 w-4 h-4 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-200 transition-colors duration-200" href="#">Terms, Data Policy</a> and <a class="font-semibold text-white hover:text-neutral-200 transition-colors duration-200" href="#">Cookies Policy</a>.</span>
                </label>
                <button class="inline-flex items-center justify-center w-full 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">
                  Get Started
                  <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>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #9

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-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>
      </div>
    </div>
  </div>
</section>

Tailwind Component #10

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950" x-data="{ tab: 'general' }">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg lg:max-w-2xl mx-auto mb-12 text-center">
      <span class="text-sm text-neutral-300 font-medium">Frequently Asked Questions</span>
      <h2 class="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>
    </div>
    <div class="text-center mb-2 md:mb-4">
      <button x-on:click="tab='general'" class="text-lg pb-2 mb-4 md:mb-0 mr-4 lg:mr-12 border-b-4 transition-colors duration-200" :class="{ 'border-white text-white': tab=='general', 'border-transparent text-neutral-400 hover:border-neutral-400': tab!='general' }">General</button>
      <button x-on:click="tab='payments'" class="text-lg pb-2 mb-4 md:mb-0 mr-4 lg:mr-12 border-b-4 transition-colors duration-200" :class="{ 'border-white text-white': tab=='payments', 'border-transparent text-neutral-400 hover:border-neutral-400': tab!='payments' }">Payments</button>
      <button x-on:click="tab='returns'" class="text-lg pb-2 mb-4 md:mb-0 mr-4 lg:mr-12 border-b-4 transition-colors duration-200" :class="{ 'border-white text-white': tab=='returns', 'border-transparent text-neutral-400 hover:border-neutral-400': tab!='returns' }">Returns</button>
      <button x-on:click="tab='refunds'" class="text-lg pb-2 border-b-4 transition-colors duration-200" :class="{ 'border-white text-white': tab=='refunds', 'border-transparent text-neutral-400 hover:border-neutral-400': tab!='refunds' }">Refunds</button>
    </div>
    <div class="relative max-w-2xl 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">
        <li class="px-6 py-8 border-b border-neutral-800" x-data="{ accordion: false }">
          <button class="group w-full flex justify-between items-center text-left" 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-all 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 duration-500">
              <p class="mt-2 text-lg text-neutral-300 leading-loose">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>
        </li>
        <li class="px-6 py-8 border-b border-neutral-800" x-data="{ accordion: false }">
          <button class="group w-full flex justify-between items-center text-left" 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-all duration-200">Donec sed leo sit amet ante ornare laoreet in quis est?</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 duration-500">
              <p class="mt-2 text-lg text-neutral-300 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
          </div>
        </li>
        <li class="px-6 py-8 border-b border-neutral-800" x-data="{ accordion: false }">
          <button class="group w-full flex justify-between items-center text-left" 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-all duration-200">Mauris vitae ex ut lectus cursus ornare?</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 duration-500">
              <p class="mt-2 text-lg text-neutral-300 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
          </div>
        </li>
        <li class="px-6 py-8 border-b border-neutral-800" x-data="{ accordion: false }">
          <button class="group w-full flex justify-between items-center text-left" 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-all duration-200">Nam consequat, augue sed rutrum faucibus?</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 duration-500">
              <p class="mt-2 text-lg text-neutral-300 leading-loose">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>
        </li>
        <li class="px-6 py-8 border-b border-neutral-800" x-data="{ accordion: false }">
          <button class="group w-full flex justify-between items-center text-left" 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-all duration-200">Cras at ante non ligula pharetra elementum?</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 duration-500">
            <p class="mt-2 text-lg text-neutral-300 leading-loose">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>
        </li>
      </ul>
    </div>
  </div>
</section>

Tailwind Component #11

Tailwind CSS

DarkPro

<section class="relative pb-20 lg:py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
    <div class="lg:absolute lg:top-0 lg:left-0 lg:bottom-0 h-full w-full lg:w-5/12 mb-12 lg:mb-0">
        <div class="relative h-full">
            <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
            <div class="pb-1 lg:pb-0 lg:pr-1 border-b lg:border-b-0 lg:border-r border-white border-opacity-20 h-full">
                <img class="relative object-cover w-full h-full border border-neutral-800" src="https://images.unsplash.com/photo-1730804518415-75297e8d2a41?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxfHxtaXNzaW5nfGVufDB8fHx8MTc1MDAyNDM3NHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080&amp;w=850" alt="">
            </div>
        </div>
    </div>
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap">
            <div class="w-full lg:w-7/12 lg:ml-auto text-center">
                <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-base leading-relaxed lg:text-xl lg:leading-relaxed text-neutral-300">Sorry! We are unable to find the page you are looking for.</p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a class="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="#">
                        Return to homepage
                        <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>
                    <a class="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="#">Try Again</a>
                </div>
            </div>
        </div>
    </div>
</section>

Tailwind Component #12

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-12">
    <div class="max-w-xl lg: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">
            <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>
          <p class="text-sm text-neutral-300">February 26, 2025</p>
        </div>
      </div>
    </div>
  </div>
  <div class="h-96 mb-16 container px-4 mx-auto">
    <div class="relative h-full">
      <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 h-full">
        <img class="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>
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto">
      <p class="mb-6 text-lg lg:text-xl leading-relaxed text-neutral-300">Building websites from wireframes that I had received. Some of those questions were:</p>
      <p class="mb-6 text-lg lg:text-xl leading-relaxed text-neutral-300">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="text-lg lg:text-xl leading-relaxed text-neutral-300">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it's easy to lose track. To save time and energy for myself, I gatheblue all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </div>
  </div>
</section>

Tailwind Component #13

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-12 lg:mb-20">
        <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-lg">
                    <h2 class="text-3xl leading-tight md:text-4xl lg:text-5xl 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 at elis</h2>
                </div>
            </div>
            <div class="w-full lg:w-1/2 px-4">
                <h3 class="mb-1 text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Address</h3>
                <p class="mb-4 lg:mb-8 text-lg text-neutral-300">1686 Geraldine Lane New York, NY 10013</p>
                <h3 class="mb-1 text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Contacts</h3>
                <p class="text-lg text-neutral-300">hello@shuffle.dev</p>
            </div>
        </div>
    </div>
    <div class="relative px-5">
        <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">
            <img class="relative w-full h-96 object-cover rounded-xl border border-neutral-800" src="darkpro-assets/images/map.png" alt="">
        </div>
    </div>
</section>

Tailwind Component #14

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950" x-data="{ pricing: '' }" x-init="pricing = $refs.pricing1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto mb-20 text-center">
      <span class="block text-sm text-neutral-400 font-medium mb-4">Lorem ipsum</span>
      <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">Security in saving</h2>
      <p class="text-lg leading-relaxed text-neutral-300 mb-8">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
      <a x-ref="pricing1" x-on:click.prevent="pricing = $refs.pricing1.textContent" class="mr-6 text-lg pb-2 border-b-4 border-white transition-colors duration-200" :class="{ 'border-white text-white': pricing == $refs.pricing1.textContent, 'text-neutral-400 border-transparent hover:border-neutral-400': pricing != $refs.pricing1.textContent }" href="#">Monthly</a>
      <a x-ref="pricing2" x-on:click.prevent="pricing = $refs.pricing2.textContent" class="text-lg pb-2 border-b-4 transition-colors duration-200" :class="{ 'border-white text-white': pricing == $refs.pricing2.textContent, 'text-neutral-400 border-transparent hover:border-neutral-400': pricing != $refs.pricing2.textContent }" href="#">Yearly</a>
    </div>
    <div class="relative flex flex-wrap items-center -mx-4 -mb-6 lg:mb-0">
      <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-900 via-purple-600 to-purple-900 rounded-2xl filter blur-3xl"></div>
      <div class="relative w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="p-1 border border-white border-opacity-20 rounded-2xl transition-all duration-200">
            <div class="p-6 md:p-12 bg-gradient-to-br from-neutral-950 via-neutral-800 to-neutral-950 border border-white border-opacity-20 rounded-xl lg:text-center">
                <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Starter</h3>
                <span class="inline-block mb-6 text-4xl md:text-6xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">$34,99</span>
                <ul class="mb-8 text-left text-lg">
                    <li class="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="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">Working materials in Figma</p>
                    </li>
                    <li class="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">100GB cloud storage</p>
                    </li>
                </ul>
                <a class="inline-flex items-center justify-center w-full 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="#">Get Started</a>
            </div>
        </div>
      </div>
      <div class="relative w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="p-1 border border-white border-opacity-20 rounded-2xl">
            <div class="p-6 md:p-12 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 border border-white border-opacity-20 rounded-xl lg:text-center relative">
              <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
                  <span class="px-4 py-2 text-sm font-semibold text-neutral-950 bg-white rounded-md">Most Popular</span>
              </div>
              <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-50 via-gray-100 to-gray-50">Pro</h3>
              <span class="inline-block mb-6 text-4xl md:text-6xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">$65,99</span>
              <ul class="mb-8 text-left text-lg">
                  <li class="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-lg text-neutral-200">Complete documentation</p>
                  </li>
                  <li class="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-lg text-neutral-200">Working materials in Figma</p>
                  </li>
                  <li class="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-lg text-neutral-200">100GB cloud storage</p>
                  </li>
                  <li class="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-lg text-neutral-200">500 team members</p>
                  </li>
                  <li class="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-lg text-neutral-200">Premium support</p>
                  </li>
              </ul>
              <a class="inline-flex items-center justify-center w-full 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="#">
                  Get Started
                  <svg class="ml-1 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>
      <div class="relative w-full lg:w-1/3 px-4">
        <div class="p-1 border border-white border-opacity-20 rounded-2xl">
            <div class="p-6 md:p-12 bg-gradient-to-bl from-neutral-950 via-neutral-800 to-neutral-950 border border-white border-opacity-20 rounded-xl lg:text-center">
              <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Premium</h3>
              <span class="inline-block mb-6 text-4xl md:text-6xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">$99,99</span>
              <ul class="mb-8 text-left text-lg">
                <li class="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="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">Working materials in Figma</p>
                </li>
                <li class="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">100GB cloud storage</p>
                </li>
              </ul>
              <a class="inline-flex items-center justify-center w-full 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="#">Get Started</a>
            </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #15

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 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 flex-wrap -m-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="p-1 border border-white border-opacity-20 rounded-2xl">
          <div class="bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 p-6 rounded-xl">
            <div class="flex flex-wrap items-center -mx-4">
              <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
                <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 border border-white border-opacity-20 rounded-xl">
                    <img class="relative w-full h-64 lg:h-52 object-cover rounded-lg border border-neutral-800" 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>
              <div class="w-full md:w-3/5 px-4">
                <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 mb-1">Danny Bailey</h3>
                <p class="mb-2 text-neutral-400">CEO &amp; Founder</p>
                <p class="text-lg text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="p-1 border border-white border-opacity-20 rounded-2xl">
          <div class="bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 p-6 rounded-xl">
            <div class="flex flex-wrap items-center -mx-4">
              <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
                <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 border border-white border-opacity-20 rounded-xl">
                    <img class="relative w-full h-64 lg:h-52 object-cover rounded-lg border border-neutral-800" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxNHx8bWFuJTIwcG9ydHJhaXR8ZW58MHwyfHx8MTc0ODg5MTU1OHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=400" alt="">
                  </div>
                </div>
              </div>
              <div class="w-full md:w-3/5 px-4">
                <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 mb-1">Danny Bailey</h3>
                <p class="mb-2 text-neutral-400">CEO &amp; Founder</p>
                <p class="text-lg text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="p-1 border border-white border-opacity-20 rounded-2xl">
          <div class="bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 p-6 rounded-xl">
            <div class="flex flex-wrap items-center -mx-4">
              <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
                <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 border border-white border-opacity-20 rounded-xl">
                    <img class="relative w-full h-64 lg:h-52 object-cover rounded-lg border border-neutral-800" src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzR8MHwxfHNlYXJjaHwxNnx8d29tYW4lMjBwb3J0cmFpdHxlbnwwfDJ8fHwxNzQ4ODkxNTc4fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=400" alt="">
                  </div>
                </div>
              </div>
              <div class="w-full md:w-3/5 px-4">
                <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 mb-1">Danny Bailey</h3>
                <p class="mb-2 text-neutral-400">CEO &amp; Founder</p>
                <p class="text-lg text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="p-1 border border-white border-opacity-20 rounded-2xl">
          <div class="bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 p-6 rounded-xl">
            <div class="flex flex-wrap items-center -mx-4">
              <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
                <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 border border-white border-opacity-20 rounded-xl">
                    <img class="relative w-full h-64 lg:h-52 object-cover rounded-lg border border-neutral-800" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxfHxtYW4lMjBwb3J0cmFpdHxlbnwwfDJ8fHwxNzQ4ODkxNTU4fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=400" alt="">
                  </div>
                </div>
              </div>
              <div class="w-full md:w-3/5 px-4">
                <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 mb-1">Danny Bailey</h3>
                <p class="mb-2 text-neutral-400">CEO &amp; Founder</p>
                <p class="text-lg text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #16

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 lg:max-w-3xl mx-auto text-center">
                <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 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-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>
                    <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="#">Share with your friends</a>
                </div>
            </div>
        </div>
    </section>

Tailwind Component #17

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 -mx-8">
          <div class="w-full lg:w-1/2 px-8 mb-12 lg:mb-0">
            <div class="h-96 lg:h-full 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="h-full p-1 border border-white border-opacity-20 rounded-2xl">
                <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>
          <div class="w-full lg:w-1/2 px-8">
            <div class="max-w-xl lg:mx-auto">
              <h2 class="mb-12 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">Lorem ipsum dolor sit amet consectetur</h2>
              <div class="flex flex-wrap -mx-4 -mb-10 lg:-mb-12">
                <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
                  <span class="mb-4 flex items-center justify-center w-12 h-12 rounded-full bg-white text-neutral-950 font-medium text-2xl leading-loose transition-all duration-200 hover:shadow-lg">1</span>
                  <p class="text-lg text-neutral-300 leading-relaxed">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
                </div>
                <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
                  <span class="mb-4 flex items-center justify-center w-12 h-12 rounded-full bg-white text-neutral-950 font-medium text-2xl leading-loose transition-all duration-200 hover:shadow-lg">2</span>
                  <p class="text-lg text-neutral-300 leading-relaxed">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
                </div>
                <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
                  <span class="mb-4 flex items-center justify-center w-12 h-12 rounded-full bg-white text-neutral-950 font-medium text-2xl leading-loose transition-all duration-200 hover:shadow-lg">3</span>
                  <p class="text-lg text-neutral-300 leading-relaxed">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
                </div>
                <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
                  <span class="mb-4 flex items-center justify-center w-12 h-12 rounded-full bg-white text-neutral-950 font-medium text-2xl leading-loose transition-all duration-200 hover:shadow-lg">4</span>
                  <p class="text-lg text-neutral-300 leading-relaxed">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

Tailwind Component #18

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:block">
          <div class="group flex 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 class="inline-block 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="Search">
              <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 transition-all duration-200 transition-all">
                <svg class="text-neutral-300 hover:text-white w-4 h-4 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
              </button>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gradient-to-br from-neutral-950 via-neutral-900 to-neutral-950 opacity-75 filter blur-3xl"></div>
    <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-neutral-900 border-r border-neutral-800 overflow-y-auto">
        <div class="flex items-center mb-12">
          <a href="#" class="mr-auto">
              <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
          </a>
          <button x-on:click="mobileNavOpen = !mobileNavOpen">
              <svg class="h-6 w-6 cursor-pointer hover:text-white text-neutral-400 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="M6 18L18 6M6 6l12 12"></path>
              </svg>
          </button>
        </div>
        <div>
            <ul>
                <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Product</a></li>
                <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Solutions</a></li>
                <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Resources</a></li>
                <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Company</a></li>
            </ul>
        </div>
        <div class="mt-auto">
            <div class="pt-6">
                <a class="block px-6 py-3 text-sm text-center font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-lg transition-all duration-200" href="#">Get Started</a>
            </div>
            <p class="mt-6 mb-4 text-sm text-center text-neutral-500">
                <span>© 2025 All rights reserved.</span>
            </p>
        </div>
    </nav>
  </div>
</section>

Tailwind Component #19

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 -mb-4">
      <div class="w-full lg:w-2/3 px-4 mb-12">
        <div class="relative flex h-96 mb-6">
          <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
          <div class="relative p-1 border border-white border-opacity-20 rounded-2xl w-full">
            <img class="w-full h-full object-cover rounded-xl border border-neutral-800" src="https://images.unsplash.com/photo-1581279219053-6c0ef420e10b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </div>
        </div>
        <span class="text-sm font-medium text-neutral-400">10 jun 2025 19:40</span>
        <h2 class="mt-2 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">Lorem ipsum dolor sit amet</h2>
        <p class="max-w-2xl mb-4 text-lg text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <a class="inline-flex items-center text-lg font-semibold text-white hover:text-white border-b border-white border-opacity-20 hover:border-opacity-50 transition-all duration-200 group" href="#">
          <span>Read more</span>
          <svg class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform 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="M9 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <div class="relative flex h-96 mb-6">
          <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
          <div class="relative p-1 border border-white border-opacity-20 rounded-2xl w-full">
            <img class="w-full h-full object-cover rounded-xl border border-neutral-800" src="https://images.unsplash.com/photo-1506464253090-7af30fe60a71?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
          </div>
        </div>
        <span class="text-sm font-medium text-neutral-400">10 jun 2025 19:40</span>
        <h2 class="mt-2 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">Lorem ipsum dolor</h2>
        <p class="mb-4 text-lg text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a class="inline-flex items-center text-lg font-semibold text-white hover:text-white border-b border-white border-opacity-20 hover:border-opacity-50 transition-all duration-200 group" href="#">
          <span>Read more</span>
          <svg class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform 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="M9 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <div class="relative flex h-96 mb-6">
          <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
          <div class="relative p-1 border border-white border-opacity-20 rounded-2xl w-full">
            <img class="w-full h-full object-cover rounded-xl border border-neutral-800" src="https://images.unsplash.com/photo-1458080464185-b0ebf9ede5cb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </div>
        </div>
        <span class="text-sm font-medium text-neutral-400">10 jun 2025 19:40</span>
        <h2 class="mt-2 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">Lorem ipsum dolor</h2>
        <p class="mb-4 text-lg text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a class="inline-flex items-center text-lg font-semibold text-white hover:text-white border-b border-white border-opacity-20 hover:border-opacity-50 transition-all duration-200 group" href="#">
          <span>Read more</span>
          <svg class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform 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="M9 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <div class="relative flex h-96 mb-6">
          <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
          <div class="relative p-1 border border-white border-opacity-20 rounded-2xl w-full">
            <img class="w-full h-full object-cover rounded-xl border border-neutral-800" src="https://images.unsplash.com/photo-1458080767772-b1011d305557?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1043&amp;q=80" alt="">
          </div>
        </div>
        <span class="text-sm font-medium text-neutral-400">10 jun 2025 19:40</span>
        <h2 class="mt-2 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">Lorem ipsum dolor</h2>
        <p class="mb-4 text-lg text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a class="inline-flex items-center text-lg font-semibold text-white hover:text-white border-b border-white border-opacity-20 hover:border-opacity-50 transition-all duration-200 group" href="#">
          <span>Read more</span>
          <svg class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform 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="M9 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <div class="relative flex h-96 mb-6">
          <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
          <div class="relative p-1 border border-white border-opacity-20 rounded-2xl w-full">
            <img class="w-full h-full object-cover rounded-xl border border-neutral-800" src="https://images.unsplash.com/photo-1581279219053-6c0ef420e10b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=800" alt="">
          </div>
        </div>
        <span class="text-sm font-medium text-neutral-400">10 jun 2025 19:40</span>
        <h2 class="mt-2 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">Lorem ipsum dolor</h2>
        <p class="mb-4 text-lg text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a class="inline-flex items-center text-lg font-semibold text-white hover:text-white border-b border-white border-opacity-20 hover:border-opacity-50 transition-all duration-200 group" href="#">
          <span>Read more</span>
          <svg class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform 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="M9 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</section>

Tailwind Component #20

Tailwind CSS

DarkPro

<div class="fixed bottom-0 inset-x-0 z-50 p-8" x-data="{ open: true }" :class="{ 'hidden': !open }">
    <div class="container px-4 mx-auto">
        <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">
                    <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="mb-8 text-neutral-300 leading-relaxed">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the 'how to reject cookies' section of our . Otherwise, if you agree to our use of cookies, please continue to use our website.</p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a x-on:click.prevent="open=false" class="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="#">
                            Allow
                            <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 x-on:click.prevent="open=false" class="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="#">Decline</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Darkpro UI Components by Shuffle

Choose from 103 of ready-made UI components available in Shuffle Editor.

By subscribing to the editor, you get access to all of them.

The UI libraries are available in four frameworks - Tailwind CSS, Bootstrap, Bulma, and Material-UI (React). We divided them into components, under which there is clear code. In Shuffle Editor, you can build whole templates from them, editing styles, texts, images, and other features. You can also export them as code and work in your favorite IDE.

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

Shuffle Components in Darkpro library

Framework

UI Library

Components

Tailwind Component #1

Your next website starts here

Tailwind Component #2

Tailwind Component #3

Tailwind Component #4

Tailwind Component #5

Tailwind Component #6

Tailwind Component #7

Tailwind Component #8

Tailwind Component #9

Tailwind Component #10

Tailwind Component #11

Tailwind Component #12

Tailwind Component #13

Tailwind Component #14

Tailwind Component #15

Tailwind Component #16

Tailwind Component #17

Tailwind Component #18

Tailwind Component #19

Tailwind Component #20

Darkpro UI 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

UI Components

Extensions

Support

Company