UI Components in Cyber library

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

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

New to Shuffle? Try our tools:

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

Components

Tailwind Component #1

Tailwind CSS

Cyber

<section class="relative scan-lines" x-data="{ mobileNavOpen: false }">
    <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
    <div class="absolute inset-0 opacity-20">
        <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
        <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
        <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
        <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
    </div>
    
    <div class="container px-4 mx-auto relative z-10">
        <nav class="flex justify-between items-center py-8 border-b border-blue-400 border-opacity-20">
            <a class="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
                <img src="cyber-assets/logo.png" alt="" class="h-5">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block text-blue-400 hover:text-purple-500 focus:outline-none transition-colors duration-300">
                    <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-10 items-center w-auto space-x-12 text-gray-50">
                <li><a class="text-sm hover:text-blue-400 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Cyberpunk Hero with Neon Headline and Code Panel

A full-width dark hero section with a top navigation bar, a large neon-gradient headline "HACK THE FUTURE", supporting monospace text, two call-to-action buttons, and a framed code-editor illustration on the right. The layout is a split screen with text on the left and a visual panel on the right.

Hero section generator

Tailwind Component #2

Tailwind CSS

Cyber

<section class="relative pb-8 overflow-y-hidden scan-lines" x-data="{ mobileNavOpen: false }">
  <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <img class="hidden lg:block absolute top-0 left-0 bottom-0 w-2/5 object-cover opacity-80" src="https://images.unsplash.com/photo-1586325194227-7625ed95172b?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxMnx8aGFja2VyfGVufDB8fHx8MTc0ODA5ODY0MXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080&amp;w=450&quot;" alt="">
  
  <div class="relative container px-4 mx-auto relative z-10">
    <nav class="flex justify-between items-center py-8 border-b border-blue-400 border-opacity-20">
      <a class="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
          <img src="cyber-assets/logo.png" alt="" class="h-5">
      </a>
      <div class="lg:hidden ml-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block text-blue-400 hover:text-purple-500 focus:outline-none transition-colors duration-300">
          <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>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Cyberpunk Hero Section with Headline, Photo, and Partner Logo Strip

A dark, neon-accented landing hero with a split layout: a night street photograph on the left and a stacked headline, monospace body copy, two CTA buttons, and a row of partner logo badges on the right. The top navigation bar includes a logo and text links.

Hero section generator

Tailwind Component #3

Tailwind CSS

Cyber

<section class="relative scan-lines bg-gradient-to-br from-black via-gray-950 to-black" x-data="{ mobileNavOpen: false }">
    <div class="absolute inset-0 opacity-20">
        <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
        <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
        <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
        <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
    </div>
    
    <div class="container px-4 mx-auto relative z-10">
        <nav class="flex justify-between items-center py-8 border-b border-blue-400 border-opacity-20">
            <a class="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
                <img src="cyber-assets/logo.png" alt="" class="h-5">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block text-blue-400 hover:text-purple-500 focus:outline-none transition-colors duration-300">
                    <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-10 items-center w-auto space-x-12 text-gray-50">
                <li><a class="text-sm hover:text-blue-400 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                    ABOUT

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #4

Tailwind CSS

Cyber

<section class="relative scan-lines bg-gradient-to-br from-black via-gray-950 to-black" x-data="{ mobileNavOpen: false }">
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <div class="container px-4 mx-auto relative z-10">
    <nav class="relative flex justify-between items-center py-8 border-b border-blue-400 border-opacity-20">
      <a class="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
          <img src="cyber-assets/logo.png" alt="" class="h-5">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block text-blue-400 hover:text-purple-500 focus:outline-none transition-colors duration-300">
          <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 text-gray-50 hover:text-blue-400 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
          About

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #5

Tailwind CSS

Cyber

<section class="relative scan-lines bg-gradient-to-br from-black via-gray-950 to-black overflow-x-hidden" x-data="{ mobileNavOpen: false }">
    <div class="absolute inset-0 opacity-20">
        <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
        <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
        <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
        <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
    </div>
    
    <div class="container px-4 mx-auto relative z-10">
        <nav class="flex justify-between items-center py-8 border-b border-blue-400 border-opacity-20">
            <a class="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
                <img src="cyber-assets/logo.png" alt="" class="h-5">
            </a>
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block text-blue-400 hover:text-purple-500 focus:outline-none transition-colors duration-300">
                <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>
        </nav>
        
        <div class="flex flex-wrap items-center -mx-4 mt-16 lg:mb-24 pb-10 lg:pb-16">
            <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
                <div class="max-w-2xl lg:max-w-md mb-6">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #6

Tailwind CSS

Cyber

<section class="relative scan-lines bg-gradient-to-br from-black via-gray-950 to-black" x-data="{ mobileNavOpen: false }">
    <div class="absolute inset-0 opacity-20">
        <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
        <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
        <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
        <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
    </div>
    
    <div class="container px-4 mx-auto relative z-10">
        <nav class="relative flex justify-between items-center py-8 border-b border-blue-400 border-opacity-20">
            <a class="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
                <img src="cyber-assets/logo.png" alt="" class="h-5">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block text-blue-400 hover:text-purple-500 focus:outline-none transition-colors duration-300">
                    <svg class="h-4 w-4" 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 text-gray-50 hover:text-blue-400 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                    ABOUT

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #7

Tailwind CSS

Cyber

<footer class="py-20 relative">
  <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <div class="container px-4 mx-auto relative z-10">
    <div class="flex flex-wrap -mx-4 mb-8 lg:mb-16">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <a class="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
          <img src="cyber-assets/logo.png" alt="" class="h-4">
        </a>
        <p class="mt-5 mb-6 max-w-xs text-gray-400 leading-loose">Interface with next-gen protocols. Execute quantum algorithms. Breach the limitations of conventional systems.</p>
        <div>
          <a class="inline-block h-6 mr-8 text-blue-400 hover:text-purple-500 transition-all duration-300 transform hover:scale-110" href="#">
            <img class="mx-auto" src="cyber-assets/socials/facebook.svg">
          </a>
          <a class="inline-block h-6 mr-8 text-green-400 hover:text-blue-400 transition-all duration-300 transform hover:scale-110" href="#">
            <img class="mx-auto" src="cyber-assets/socials/github.svg">
          </a>
          <a class="inline-block h-6 mr-8 text-purple-500 hover:text-green-400 transition-all duration-300 transform hover:scale-110" href="#">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Cyberpunk Footer with Multi-Column Links and Social Icons

A dark website footer with a glitch-style logo, tagline, social media icons, four colored link columns (Company, Pages, Legal, Resources), a divider, and a copyright line. The footer uses monospaced type and neon cyan, purple, and green column headings.

Footers generator

Tailwind Component #8

Tailwind CSS

Cyber

<section class="relative py-20 scan-lines">
    <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
    <div class="absolute inset-0 opacity-20">
        <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
        <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
        <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
        <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
    </div>
    
    <div class="container px-4 mx-auto relative z-10">
        <div class="mb-16 text-center">
            <span class="text-xs font-semibold text-blue-400 uppercase tracking-wider animate-pulse">DATA QUERY MODULE</span>
            <h2 class="mt-2 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">FREQUENTLY ACCESSED PROTOCOLS</h2>
        </div>
        
        <div class="flex flex-wrap -mx-4 -mb-8">
            <div class="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
                <div class="relative hologram-effect p-6 rounded-lg border border-blue-400 border-opacity-30 animate-float hover:border-opacity-60 transition-all duration-300 group">
                    <span class="mr-6 mb-6 flex items-center justify-center w-16 h-16 p-3 bg-gradient-to-br from-blue-400 to-purple-500 hover:from-purple-500 hover:to-green-400 transition-all duration-300 transform group-hover:scale-110" style="clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);">
                        <svg class="text-gray-950" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z" fill="currentColor"></path>
                        </svg>
                    </span>
                    <h3 class="mb-2 text-lg lg:text-2xl font-bold font-heading text-gray-50 tracking-wider hover:text-blue-400 transition-colors duration-300">QUANTUM ENCRYPTION</h3>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Gradient Card Grid with Frequently Accessed Protocols Heading

A dark-themed grid of six cards under a gradient heading titled 'Frequently Accessed Protocols', each card showing a gradient icon tile, a bold uppercase title, and a bulleted list of monospaced items. The layout is a three-column grid with cards of varying heights and accent dots in the top-right corners.

FAQ generator

Tailwind Component #9

Tailwind CSS

Cyber

<section class="relative py-20 scan-lines">
  <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
  <div class="absolute top-0 left-0 lg:bottom-0 h-96 lg:h-auto w-full lg:w-8/12 bg-gradient-to-br from-blue-400 via-purple-500 to-blue-400 opacity-20"></div>
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <div class="relative container px-4 mx-auto z-10">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="max-w-lg relative">
          <div class="absolute -top-2 -left-2 w-full h-full border-2 border-blue-400 opacity-20 transform rotate-1 z-n1"></div>
          <h2 class="relative mb-6 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-black font-heading tracking-wider animate-glitch bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">SYSTEM ACCESS PROTOCOL INITIALIZED </h2>
          <p class="text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-400">Interface with quantum encryption matrices. Execute biometric validation sequences. Breach conventional security limitations through neural-net authentication protocols.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="lg:max-w-md p-6 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-center rounded-lg border border-blue-400 border-opacity-30 hologram-effect animate-float relative">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-10 rounded-lg"></div>
          <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
          <div class="absolute bottom-4 left-4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-75"></div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Cyberpunk Split-Screen Sign-In Hero with Neon Headline

A dark, split-screen authentication section with a large neon headline and descriptive text on the left and a 'Neural Link' sign-in card on the right. The card includes email and password fields, a terms checkbox with links, and a gradient 'Execute Connection' button.

Tailwind Component #10

Tailwind CSS

Cyber

<section class="py-20 relative">
  <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <div class="container px-4 mx-auto text-center relative z-10">
    <div class="max-w-lg lg:max-w-2xl mx-auto text-center mb-16">
        <div class="relative">
            <h2 class="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-black font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">DOWNLOAD NEURAL INTERFACE</h2>
            <div class="absolute -top-2 -left-2 w-full h-full border-2 border-blue-400 opacity-20 transform rotate-1 z-n1 z-n1"></div>
        </div>
        <p class="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-400">Access quantum protocols through our mobile neural interface. Connect to the grid anywhere, anytime. Initialize advanced cybernetic operations from your portable device.</p>
        <div class="flex justify-center items-center gap-4">
            <a class="group relative px-6 py-3 bg-gradient-to-r from-blue-400 to-purple-500 hover:from-purple-500 hover:to-blue-400 transform hover:scale-105 transition-all duration-300 overflow-hidden" href="#" style="clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);">
                <span class="relative z-10 text-gray-950 font-semibold text-sm tracking-wider">APP STORE</span>
                <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-20 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
            </a>
            <a class="group relative px-6 py-3 border-2 border-green-400 text-green-400 hover:bg-green-400 hover:text-gray-950 transform hover:scale-105 transition-all duration-300 overflow-hidden" href="#" style="clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);">
                <span class="relative z-10 font-semibold text-sm tracking-wider">GOOGLE PLAY</span>
                <div class="absolute inset-0 bg-green-400 transform translate-x-full group-hover:translate-x-0 transition-transform duration-300"></div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Neural Interface App Download Hero with Code Screenshot

A dark hero section promoting a mobile neural interface app with a gradient-outlined heading, monospace supporting text, and App Store and Google Play download buttons. A blurred code editor screenshot in a gradient-bordered frame sits below as illustrative content.

Application generator

Tailwind Component #11

Tailwind CSS

Cyber

<nav class="relative px-10 py-8 bg-gradient-to-br from-black via-gray-950 to-black border-b border-blue-400 border-opacity-20 scan-lines" x-data="{ mobileNavOpen: false }">
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-4 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
            <div class="absolute top-6 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
            <div class="absolute bottom-4 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
            <div class="absolute bottom-6 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
        </div>
        
        <div class="flex justify-between items-center relative z-10">
            <a class="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
                <img src="cyber-assets/logo.png" alt="" class="h-5">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block text-blue-400 hover:text-purple-500 focus:outline-none transition-colors duration-300">
                    <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 lg:items-center lg:w-auto lg:space-x-12">
                <li><a class="text-sm text-gray-50 hover:text-blue-400 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                    ABOUT
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full"></span>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Cyber Navigation Bar with Search

A horizontal dark navigation bar with a gradient cyan-to-purple wordmark logo on the left, four uppercase monospace menu links (About, Company, Services, Testimonials) in the center, and a search input with a gradient search button on the right. The styling uses a futuristic neon-accent aesthetic on a near-black textured background.

Navigation (horizontal) generator

Tailwind Component #12

Tailwind CSS

Cyber

<section class="relative py-20 bg-gradient-to-br from-black via-gray-950 to-black">
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <div class="container px-4 mx-auto relative z-10">
    <div class="flex flex-wrap -mx-4 -mb-16">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-16">
        <div class="relative group p-6 border border-blue-400 border-opacity-30 bg-gradient-to-br from-gray-950 to-black hover:border-blue-400 transition-all duration-300 animate-float" style="clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-5 group-hover:opacity-10 transition-opacity duration-300"></div>
          <div class="flex relative z-10">
            <span class="mr-6 transform group-hover:scale-110 transition-transform duration-300">
              <svg class="text-blue-400 group-hover:text-green-400 transition-colors duration-300" 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-4 text-xl md:text-2xl font-bold font-heading tracking-wider bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent group-hover:animate-glitch">SECURITY PROTOCOL</h3>
              <p class="text-lg leading-loose md:text-lg md:leading-loose text-gray-400 group-hover:text-gray-300 transition-colors duration-300">Initialize quantum encryption algorithms. Establish secure neural pathways for data integrity and protect against unauthorized access vectors.</p>
            </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Feature Card Grid with Gradient Headings and Icon Badges

A six-card grid on a dark background, with each card showing a circular outlined icon, a gradient-colored uppercase heading, and monospaced body text. The cards are arranged in a three-column grid with slightly irregular corner cuts and glowing borders.

Features generator

Tailwind Component #13

Tailwind CSS

Cyber

<section class="relative py-20 bg-gradient-to-br from-black via-gray-950 to-black">
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <div class="container px-4 mx-auto relative z-10">
    <div class="max-w-3xl mx-auto mb-12 lg:mb-16 text-center">
      <span class="text-xs font-semibold text-blue-400 uppercase tracking-wider animate-pulse">NEURAL NETWORK</span>
      <h2 class="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">DIGITAL OPERATIVES MATRIX</h2>
      <p class="text-lg text-gray-400 leading-loose">Interface with our elite cybernetic team. Each operative specializes in quantum protocols and system infiltration algorithms.</p>
    </div>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="group relative flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-950 py-12 border border-blue-400 border-opacity-20 hover:border-opacity-60 transition-all duration-300 transform hover:scale-105 animate-float" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <div class="text-center relative z-10">
            <div class="relative w-20 h-20 mx-auto mb-6">
              <img class="w-20 h-20 mx-auto rounded-full border-2 border-blue-400 p-1" 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 class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
            </div>
            <h3 class="mb-1 text-2xl font-bold font-heading text-blue-400 tracking-wider">AGENT BAILEY</h3>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Digital Operatives Matrix Team Card Grid

A dark-themed section with a gradient heading and a 3x2 grid of team member cards, each showing a circular avatar with status dot, a cyan, purple, or green name, and a monospace role label. The cards have angled corners and thin accent borders.

Team generator

Tailwind Component #14

Tailwind CSS

Cyber

<section class="py-20 relative scan-lines">
        <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
            <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
            <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
            <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
        </div>
        
        <div class="container px-4 mx-auto relative z-10">
            <div class="flex flex-wrap items-center -mx-4">
                <div class="w-full lg:w-5/12 px-4 mb-12 lg:mb-0">
                    <div class="relative hologram-effect p-2 rounded-lg border border-blue-400 border-opacity-30 animate-float">
                        <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-10 rounded-lg"></div>
                        <img class="mx-auto object-cover rounded-lg relative z-10 border-2 border-blue-400 border-opacity-50" 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 class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                        <div class="absolute bottom-4 left-4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-75"></div>
                    </div>
                </div>
                <div class="w-full lg:w-7/12 px-4">
                    <div class="max-w-xl lg:ml-auto">
                        <div class="mb-4 relative">
                            <img class="w-12 h-12 opacity-60 filter hue-rotate-180" src="cyber-assets/images/quote.svg" alt="">
                        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Quote Card with Portrait and Gradient Headline

A dark-themed testimonial-style section pairing a framed portrait photo on the left with a large gradient uppercase headline, monospaced body text, and a name and title attribution on the right. It has no visible navigation or form controls, and the layout is split into two columns.

Testimonials generator

Tailwind Component #15

Tailwind CSS

Cyber

<section class="relative py-20 scan-lines" x-data="{ pricing: '' }" x-init="pricing = $refs.pricing1.textContent">
    <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
    <div class="absolute inset-0 opacity-20">
        <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
        <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
        <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
        <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
    </div>
    
    <div class="container px-4 mx-auto relative z-10">
        <div class="max-w-xl lg:max-w-2xl mx-auto mb-12 text-center">
            <span class="text-xs font-semibold text-blue-400 uppercase tracking-wider">SYSTEM PROTOCOLS</span>
            <h2 class="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-black font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">ACCESS LEVELS CONFIGURED FOR MAXIMUM EFFICIENCY</h2>
            <p class="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-400">Interface with premium protocols. Execute advanced algorithms. Select your access tier and transcend digital limitations.</p>
            <div class="flex justify-center gap-6">
                <a x-ref="pricing1" x-on:click.prevent="pricing = $refs.pricing1.textContent" class="text-lg pb-2 border-b-4 font-semibold tracking-wider transition-all duration-300 hover:animate-pulse" :class="{ 'border-blue-400 text-blue-400': pricing == $refs.pricing1.textContent, 'border-transparent hover:border-blue-400 text-gray-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 font-semibold tracking-wider transition-all duration-300 hover:animate-pulse" :class="{ 'border-blue-400 text-blue-400': pricing == $refs.pricing2.textContent, 'border-transparent hover:border-blue-400 text-gray-400': pricing != $refs.pricing2.textContent }" href="#">YEARLY</a>
            </div>
        </div>
        
        <div class="flex flex-wrap items-center -mx-4 -mb-6 lg:mb-0">
            <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
                <div class="relative p-6 md:p-12 bg-gradient-to-br from-gray-900 to-gray-950 border border-blue-400 border-opacity-30 hologram-effect animate-float" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));">
                    <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-5"></div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Neon Pricing Section with Three Access Tiers and Monthly/Yearly Toggle

A dark-themed pricing section headed by a gradient heading and monospace subtext, with a Monthly/Yearly toggle above three angled plan cards (Basic, Pro, Elite) listing prices, feature checklists, and call-to-action buttons. The center Pro card is highlighted with a purple border and a Premium badge.

Pricing generator

Tailwind Component #16

Tailwind CSS

Cyber

<section class="relative py-20 scan-lines">
        <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
            <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
            <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
            <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
        </div>
        
        <div class="container px-4 mx-auto relative z-10">
            <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 group">
                    <div class="relative hologram-effect p-8 rounded-lg border border-blue-400 border-opacity-30 hover:border-opacity-60 transform hover:scale-105 transition-all duration-300 animate-float bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 bg-opacity-5">
                        <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-5 rounded-lg group-hover:opacity-10 transition-opacity duration-300"></div>
                        <div class="relative z-10">
                            <svg class="mx-auto mb-4 text-blue-400 group-hover:text-purple-500 transition-colors duration-300 animate-pulse" 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-2 text-2xl font-bold font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent group-hover:animate-glitch">600 000 000</h3>
                            <p class="text-lg text-gray-400 tracking-wider">PROTOCOL EXECUTIONS</p>
                        </div>
                        <div class="absolute top-4 right-4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
                        <div class="absolute bottom-4 left-4 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Four-Card Metric Stat Row with Gradient Numerals

A horizontal row of four dark, glass-style stat cards, each showing a circular icon, a large gradient-colored number of 600,000,000, and a spaced uppercase label such as Protocol Executions or Quantum Bits. Cards are staggered vertically with subtle gradient borders and small corner dots.

Stats generator

Tailwind Component #17

Tailwind CSS

Cyber

<section class="relative pt-20 scan-lines">
        <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
            <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
            <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
            <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
        </div>
        
        <div class="container px-4 mx-auto mb-12 lg:mb-20 relative z-10">
            <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 relative">
                        <div class="absolute -top-2 -left-2 w-full h-full border-2 border-blue-400 opacity-20 transform rotate-1 z-n1"></div>
                        <h2 class="text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-black font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent animate-glitch">ESTABLISH CONNECTION</h2>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 px-4">
                    <div class="hologram-effect p-6 rounded-lg border border-blue-400 border-opacity-30 animate-float relative">
                        <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                        <h3 class="mb-1 text-2xl font-black font-heading tracking-wider text-blue-400">COORDINATES</h3>
                        <p class="mb-4 lg:mb-8 text-lg text-green-400 hover:text-blue-400 transition-colors duration-300">1686 GERALDINE LANE NEW YORK, NY 10013</p>
                        <h3 class="mb-1 text-2xl font-black font-heading tracking-wider text-purple-500">DATA CHANNELS</h3>
                        <p class="text-lg text-green-400 hover:text-blue-400 transition-colors duration-300">hello@wireframes.org</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Establish Connection Contact Hero with Map

A dark hero section with a bold outlined "ESTABLISH CONNECTION" headline on the left and a glassy contact info card on the right listing coordinates and an email channel. A Bay Area map with a glowing location marker and a "LOCATION LOCKED" badge fills the lower portion.

Contact generator

Tailwind Component #18

Tailwind CSS

Cyber

<div class="fixed bottom-0 inset-x-0 z-50 scan-lines" x-data="{ open: true }" :class="{ 'hidden': !open }">
        <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black opacity-95"></div>
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-10 left-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse"></div>
            <div class="absolute top-20 right-1/3 w-2 h-2 bg-green-400 rounded-full animate-pulse delay-75"></div>
            <div class="absolute bottom-10 left-1/3 w-1 h-1 bg-purple-500 rounded-full animate-pulse delay-150"></div>
            <div class="absolute bottom-20 right-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse delay-300"></div>
        </div>
        
        <div class="container px-4 mx-auto mt-8 relative z-10">
            <div class="relative p-8 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-950 border-2 border-blue-400 border-opacity-30 animate-float" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));">
                <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-5"></div>
                <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                <div class="absolute bottom-4 left-4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-75"></div>
                
                <div class="relative z-10">
                    <h3 class="mb-2 text-2xl font-bold font-heading tracking-wider animate-glitch bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">COOKIE PROTOCOL</h3>
                    <p class="mb-8 text-gray-400 leading-loose text-sm lg:text-base">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="group relative px-6 py-3 text-sm text-center bg-gradient-to-r from-green-400 to-blue-400 hover:from-blue-400 hover:to-green-400 text-gray-950 font-semibold tracking-wider transition-all duration-300 transform hover:scale-105 hover:animate-pulse-neon overflow-hidden" href="#" style="clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);">
                            <span class="relative z-10">ALLOW ACCESS</span>
                            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-20 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
                        </a>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Cookie Protocol Consent Banner

A dark, full-width cookie consent banner with a cyan-gradient heading, monospace body text describing cookie usage, and two actions: a green-to-cyan gradient 'Allow Access' button and an outlined purple 'Deny Protocol' button. The panel uses angled corners and a neon, cyberpunk-styled border.

Cookies generator

Tailwind Component #19

Tailwind CSS

Cyber

<section class="py-20 relative scan-lines">
  <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <div class="container px-4 mx-auto mb-16 relative z-10">
    <div class="max-w-xl lg:max-w-2xl mx-auto text-center">
      <div class="flex mb-2 items-center justify-center">
        <a class="text-xs text-blue-400 hover:text-purple-500 transition-colors duration-300 tracking-wider" href="#">HOME</a>
        <svg class="w-3 h-3 mx-1 text-blue-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-purple-500 hover:text-green-400 transition-colors duration-300 tracking-wider" href="#">DATA LOG</a>
        <svg class="w-3 h-3 mx-1 text-purple-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
        </svg>
        <a class="text-xs text-green-400 hover:text-blue-400 transition-colors duration-300 tracking-wider" href="#">ENTRY 001</a>
      </div>
      <div class="relative">
        <h2 class="mb-6 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-black font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">NEURAL INTERFACE PROTOCOL</h2>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Neural Interface Protocol Data Log Entry

A dark-themed data log article page with a gradient-outlined title, author card with avatar and timestamp, a full-width skateboarding photo banner with an online status badge, and monospaced body text blocks with stat bars at the bottom. The outer component is a content article layout rather than a marketing or app interface.

Content generator

Tailwind Component #20

Tailwind CSS

Cyber

<section class="py-20 relative scan-lines">
  <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <div class="container px-4 mx-auto relative z-10">
    <div class="max-w-xl lg:max-w-3xl mx-auto text-center">
      <span class="text-xs font-semibold text-blue-400 uppercase tracking-wider border border-blue-400 border-opacity-30 px-4 py-2 bg-blue-400 bg-opacity-10 animate-pulse" style="clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);">NEW PROTOCOL</span>
      
      <div class="relative mt-8">
        <h2 class="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-black font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent animate-glitch">EXECUTE RAPID PROTOCOLS THAT AMPLIFY YOUR SYSTEM'S CORE PERFORMANCE </h2>
        <div class="absolute -top-2 -left-2 w-full h-full border-2 border-blue-400 opacity-10 transform rotate-1"></div>
      </div>
      
      <p class="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-400 max-w-2xl mx-auto">If you've ever wondered how to evolve your digital infrastructure, this is your access point. Initialize quantum leap protocols in expanding your operational matrix with these advanced algorithms.</p>
      
      <div class="flex flex-col md:flex-row justify-center gap-4">
        <a class="group relative px-8 py-4 text-sm text-center bg-gradient-to-r from-blue-400 to-purple-500 hover:from-purple-500 hover:to-blue-400 text-gray-950 font-semibold tracking-wider transition-all duration-300 transform hover:scale-105 hover:animate-pulse-neon overflow-hidden" href="#" style="clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 15px 100%);">
          <span class="relative z-10">INITIALIZE DEMO</span>
          <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-20 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Cyberpunk Hero with Neon Headline and Gradient CTA

A centered dark hero section with a small "New Protocol" tag, a large cyan headline with magenta offset shadow, a monospace body paragraph, and two call-to-action buttons: a cyan-to-purple gradient button and an outlined green button. The layout is a vertically stacked, centered introduction with a thin bordered frame behind the headline.

Call to action generator

Cyber UI Components by Shuffle

Choose from 110 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

UI Components – Cyber Library

Framework

UI Library

Components

Tailwind Component #1

Get the code for 13,400+ components

Dark Cyberpunk Hero with Neon Headline and Code Panel

Tailwind Component #2

Get the code for 13,400+ components

Cyberpunk Hero Section with Headline, Photo, and Partner Logo Strip

Tailwind Component #3

Get the code for 13,400+ components

Tailwind Component #4

Get the code for 13,400+ components

Tailwind Component #5

Get the code for 13,400+ components

Tailwind Component #6

Get the code for 13,400+ components

Tailwind Component #7

Get the code for 13,400+ components

Dark Cyberpunk Footer with Multi-Column Links and Social Icons

Tailwind Component #8

Get the code for 13,400+ components

Dark Gradient Card Grid with Frequently Accessed Protocols Heading

Tailwind Component #9

Get the code for 13,400+ components

Cyberpunk Split-Screen Sign-In Hero with Neon Headline

Tailwind Component #10

Get the code for 13,400+ components

Neural Interface App Download Hero with Code Screenshot

Tailwind Component #11

Get the code for 13,400+ components

Dark Cyber Navigation Bar with Search

Tailwind Component #12

Get the code for 13,400+ components

Dark Feature Card Grid with Gradient Headings and Icon Badges

Tailwind Component #13

Get the code for 13,400+ components

Digital Operatives Matrix Team Card Grid

Tailwind Component #14

Get the code for 13,400+ components

Dark Quote Card with Portrait and Gradient Headline

Tailwind Component #15

Get the code for 13,400+ components

Dark Neon Pricing Section with Three Access Tiers and Monthly/Yearly Toggle

Tailwind Component #16

Get the code for 13,400+ components

Four-Card Metric Stat Row with Gradient Numerals

Tailwind Component #17

Get the code for 13,400+ components

Establish Connection Contact Hero with Map

Tailwind Component #18

Get the code for 13,400+ components

Cookie Protocol Consent Banner

Tailwind Component #19

Get the code for 13,400+ components

Neural Interface Protocol Data Log Entry

Tailwind Component #20

Get the code for 13,400+ components

Dark Cyberpunk Hero with Neon Headline and Gradient CTA

Cyber UI Components by Shuffle

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly