Tailwind CSS Components

Framework

UI Library

Components

Tailwind Component #2761

Tailwind CSS

Wrexa

<section class="py-24 md:py-40 bg-white relative">
  <div class="absolute top-0 left-0 w-full h-6">
    <div class="mx-8 h-6 bg-white"></div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 mb-28">
      <div class="w-full xl:w-2/3 px-4 mb-8 xl:mb-0">
        <h3 class="font-heading text-2xl sm:text-3xl mb-4">Have any question?</h3>
        <h2 class="font-heading text-4xl sm:text-5xl md:text-6xl">Follow us and our story</h2>
      </div>
      <div class="w-full xl:w-auto px-4 xl:ml-auto"><a class="inline-block px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Get Started</a></div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-1/2 lg:w-1/3 xl:w-1/5 px-4 mb-8">
        <h4 class="mb-5">About</h4>
        <ul>
          <li class="mb-4"><a class="inline-block text-gray-900 font-light" href="#">Story</a></li>
          <li class="mb-4"><a class="inline-block text-gray-900 font-light" href="#">Creative Team</a></li>
          <li class="mb-4"><a class="inline-block text-gray-900 font-light" href="#">Founders</a></li>
          <li class="mb-4"><a class="inline-block text-gray-900 font-light" href="#">Why Us</a></li>
          <li class="mb-4"><a class="inline-block text-gray-900 font-light" href="#">Our Mission</a></li>
          <li><a class="inline-block text-gray-900 font-light" href="#">Idea</a></li>
        </ul>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Light footer with CTA heading, link columns, legal links, and copyright

A light-themed website footer that opens with a "Have any question?" heading and a purple Get Started button, followed by five link columns (About, Product, Follow, Application, Support), a row of legal links, and a copyright line with a purple logo badge.

Tailwind Component #2762

Tailwind CSS

Wrexa

<section class="pt-24 md:pt-40 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-24">
      <span class="font-heading text-xl">06</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl">Download App</span>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full xl:w-1/2 px-4 flex items-end order-last xl:order-first">
        <img class="block max-w-sm xl:max-w-lg mx-auto xl:ml-0" src="wrexa-assets/images/application-right.png" alt="">
      </div>
      <div class="w-full xl:w-1/2 px-4 pb-24 lg:pb-52">
        <div class="max-w-md lg:max-w-none mx-auto">
          <h1 class="font-heading text-4xl sm:text-5xl lg:text-7xl mb-10">Online Configurator</h1>
          <div class="flex items-center mb-4">
            <span class="w-8 h-8 mr-8 text-indigo-500">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="16" cy="16" r="16" fill="currentColor"></circle>
                <path d="M21.6209 13.6159L20.7084 12.6695C20.6785 12.6384 20.6429 12.6137 20.6038 12.5968C20.5647 12.58 20.5227 12.5713 20.4803 12.5713C20.4379 12.5713 20.396 12.58 20.3568 12.5968C20.3177 12.6137 20.2822 12.6384 20.2523 12.6695L15.5865 17.7773L12.9121 15.0028C12.8508 14.9392 12.7677 14.9035 12.681 14.9035C12.5943 14.9035 12.5112 14.9392 12.4499 15.0028L11.5254 15.9622C11.4641 16.0258 11.4297 16.112 11.4297 16.2019C11.4297 16.2918 11.4641 16.378 11.5254 16.4415L15.329 20.4773C15.3641 20.513 15.4068 20.5397 15.4536 20.5554C15.5004 20.571 15.5501 20.5751 15.5987 20.5673C15.6488 20.5764 15.7002 20.5729 15.7487 20.5573C15.7972 20.5416 15.8414 20.5142 15.8777 20.4773L21.6209 14.0891C21.6815 14.0264 21.7155 13.9412 21.7155 13.8525C21.7155 13.7637 21.6815 13.6786 21.6209 13.6158V13.6159Z" fill="white"></path>
                <defs><rect width="10.2857" height="8" fill="white" transform="translate(11.4297 12.5713)"></rect></defs>
              </svg>
            </span>
            <span class="text-xl sm:text-2xl">Beautiful and awesome interface</span>
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Split-Screen App Download Promo with Device Mockup

A marketing section promoting an online configurator app, with a phone mockup showing a furniture configurator UI on the left and a heading, feature checklist, and purple "Download Application" button on the right. The layout is a two-column split with a light background.

Tailwind Component #2763

Tailwind CSS

Wrexa

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative bg-gray-900 px-6 sm:px-12 py-4">
    <div class="hidden 3xl:block absolute bottom-0 left-1/2 transform -translate-x-1/2">
      <ul class="flex items-end">
        <li class="mr-5">
          <a class="inline-flex items-center pr-8 pb-5 text-sm text-white hover:text-gray-200" href="#">
            <span class="mr-4">Collection</span>
            <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 2L6 6L2 2" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="border-b-4 border-lime-900"></div>
        </li>
        <li class="pb-6 mr-20"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">Projects</a></li>
        <li class="pb-6 mr-20"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">About</a></li>
        <li class="pb-6 mr-20"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">How to Start</a></li>
        <li class="pb-6"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">Your Design</a></li>
      </ul>
    </div>
    <div class="flex items-center 3xl:hidden">
      <a class="inline-block self-center" href="#">
        <img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex ml-auto items-center justify-center w-14 h-14 rounded-full bg-white hover:bg-gray-200">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Dark Minimal Top Navigation Bar with Logo and Menu Toggle

A slim dark navigation bar with a circular logo mark on the left and a white circular hamburger menu button on the right. The bar has no visible links, suggesting a compact header for a single-page or mobile-style layout.

Tailwind Component #2764

Tailwind CSS

Wrexa

<section class="relative pb-40 bg-gray-900 overflow-hidden">
  <div class="bg-white h-16 mb-32 sm:mb-52">
    <div class="absolute top-0 left-1/2">
      <div class="w-px h-16 bg-gray-900"></div>
      <div class="w-px h-24 bg-white"></div>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-18">
      <span class="font-heading text-xl text-white">08</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl text-white">Customer review</span>
    </div>
    <div class="max-w-4xl mx-auto text-center mb-32">
      <h2 class="font-heading text-5xl sm:text-6xl text-white">Don’t take our word for it. Trust our stats</h2>
    </div>
    <div class="flex justify-center mb-24">
      <div class="hidden md:block w-full md:w-auto mr-8 flex-shrink-0">
        <div class="max-w-md mx-auto px-8 pt-12 pb-20 h-full border border-gray-700 rounded">
          <div class="flex mb-10 items-center justify-between">
            <div class="flex items-center">
              <div class="flex-shrink-0 relative max-w-max mr-4">
                <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                <img class="absolute bottom-0 right-0 -mb-1 -mr-1" src="wrexa-assets/elements/miro-logo-small-icon.svg" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2765

Tailwind CSS

Wrexa

<section class="py-40 bg-gray-900" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="pt-18 pb-16 px-12 bg-gray-800 rounded-2xl">
      <h3 class="font-heading text-4xl text-white mb-5">New files</h3>
      <div class="overflow-x-auto px-4 mb-14">
        <table class="table-auto w-full min-w-max">
          <thead>
            <tr>
              <th class="pb-2 border-b border-gray-700 text-left" scope="col">
                <span class="text-sm font-normal text-gray-700">Catalog</span>
              </th>
              <th class="pb-2 border-b border-gray-700 text-left" scope="col">
                <span class="text-sm font-normal text-gray-700">Notes</span>
              </th>
              <th class="pb-2 border-b border-gray-700 text-left" scope="col">
                <span class="text-sm font-normal text-gray-700">All users</span>
              </th>
              <th class="pb-2 border-b border-gray-700 text-left" scope="col">
                <span class="text-sm font-normal text-gray-700">Activity</span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2766

Tailwind CSS

Wrexa

<section class="pt-24 md:pt-40 bg-gray-900 overflow-hidden">
  <div class="container px-4 mx-auto">
    <h1 class="font-heading text-4xl sm:text-5xl lg:text-7xl text-white mb-32">Our application</h1>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 flex items-end order-last lg:order-first">
        <img class="block max-w-sm xl:max-w-lg mx-auto xl:mr-0" src="wrexa-assets/images/application-right.png" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-4 pb-24">
        <div class="max-w-md lg:max-w-xl mx-auto">
          <h1 class="font-heading text-3xl sm:text-4xl lg:text-5xl text-white mb-20">Save and sharing files has never been easy</h1>
          <div class="flex flex-wrap -mx-4 mb-14">
            <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
              <div class="flex">
                <div class="mr-6 text-indigo-500">
                  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19.9999 3.33301C19.5579 3.33301 19.134 3.5086 18.8214 3.82116C18.5088 4.13372 18.3333 4.55765 18.3333 4.99967V8.33301C18.3333 8.77504 18.5088 9.19896 18.8214 9.51152C19.134 9.82408 19.5579 9.99967 19.9999 9.99967C20.4419 9.99967 20.8659 9.82408 21.1784 9.51152C21.491 9.19896 21.6666 8.77504 21.6666 8.33301V4.99967C21.6666 4.55765 21.491 4.13372 21.1784 3.82116C20.8659 3.5086 20.4419 3.33301 19.9999 3.33301ZM34.9999 18.333H31.6666C31.2246 18.333 30.8006 18.5086 30.4881 18.8212C30.1755 19.1337 29.9999 19.5576 29.9999 19.9997C29.9999 20.4417 30.1755 20.8656 30.4881 21.1782C30.8006 21.4907 31.2246 21.6663 31.6666 21.6663H34.9999C35.4419 21.6663 35.8659 21.4907 36.1784 21.1782C36.491 20.8656 36.6666 20.4417 36.6666 19.9997C36.6666 19.5576 36.491 19.1337 36.1784 18.8212C35.8659 18.5086 35.4419 18.333 34.9999 18.333ZM9.99992 19.9997C9.99992 19.5576 9.82432 19.1337 9.51176 18.8212C9.1992 18.5086 8.77528 18.333 8.33325 18.333H4.99992C4.55789 18.333 4.13397 18.5086 3.82141 18.8212C3.50885 19.1337 3.33325 19.5576 3.33325 19.9997C3.33325 20.4417 3.50885 20.8656 3.82141 21.1782C4.13397 21.4907 4.55789 21.6663 4.99992 21.6663H8.33325C8.77528 21.6663 9.1992 21.4907 9.51176 21.1782C9.82432 20.8656 9.99992 20.4417 9.99992 19.9997ZM10.3666 8.33301C10.0417 8.0258 9.60807 7.86023 9.16111 7.87274C8.71415 7.88524 8.29046 8.07478 7.98325 8.39967C7.67604 8.72457 7.51048 9.15819 7.52298 9.60515C7.53548 10.0521 7.72503 10.4758 8.04992 10.783L10.4499 13.0997C10.611 13.2552 10.8017 13.3767 11.0108 13.4568C11.2198 13.537 11.4428 13.5743 11.6666 13.5663C11.8911 13.5655 12.1131 13.5193 12.3193 13.4305C12.5255 13.3417 12.7117 13.2122 12.8666 13.0497C13.177 12.7374 13.3512 12.315 13.3512 11.8747C13.3512 11.4344 13.177 11.0119 12.8666 10.6997L10.3666 8.33301ZM28.3333 13.5663C28.7624 13.5646 29.1743 13.3975 29.4833 13.0997L31.8833 10.783C32.176 10.4771 32.3414 10.0712 32.3458 9.64779C32.3501 9.22437 32.1931 8.81517 31.9067 8.50329C31.6203 8.19141 31.2259 8.00025 30.8037 7.96862C30.3814 7.93699 29.9629 8.06728 29.6333 8.33301L27.2333 10.6997C26.9228 11.0119 26.7486 11.4344 26.7486 11.8747C26.7486 12.315 26.9228 12.7374 27.2333 13.0497C27.5218 13.3542 27.9146 13.5387 28.3333 13.5663ZM19.9999 29.9997C19.5579 29.9997 19.134 30.1753 18.8214 30.4878C18.5088 30.8004 18.3333 31.2243 18.3333 31.6663V34.9997C18.3333 35.4417 18.5088 35.8656 18.8214 36.1782C19.134 36.4907 19.5579 36.6663 19.9999 36.6663C20.4419 36.6663 20.8659 36.4907 21.1784 36.1782C21.491 35.8656 21.6666 35.4417 21.6666 34.9997V31.6663C21.6666 31.2243 21.491 30.8004 21.1784 30.4878C20.8659 30.1753 20.4419 29.9997 19.9999 29.9997ZM29.5499 26.8997C29.2317 26.5925 28.8044 26.4243 28.3621 26.4321C27.9199 26.4399 27.4988 26.6231 27.1916 26.9413C26.8844 27.2596 26.7162 27.6869 26.724 28.1291C26.7318 28.5714 26.915 28.9925 27.2333 29.2997L29.6333 31.6663C29.9422 31.9641 30.3541 32.1313 30.7833 32.133C31.0066 32.1343 31.2279 32.0907 31.434 32.0048C31.6402 31.9189 31.8269 31.7925 31.9833 31.633C32.1395 31.4781 32.2635 31.2937 32.3481 31.0906C32.4327 30.8875 32.4762 30.6697 32.4762 30.4497C32.4762 30.2297 32.4327 30.0118 32.3481 29.8087C32.2635 29.6056 32.1395 29.4213 31.9833 29.2663L29.5499 26.8997ZM10.4499 26.8997L8.04992 29.2163C7.8937 29.3713 7.76971 29.5556 7.6851 29.7587C7.60049 29.9618 7.55692 30.1797 7.55692 30.3997C7.55692 30.6197 7.60049 30.8375 7.6851 31.0406C7.76971 31.2437 7.8937 31.4281 8.04992 31.583C8.20624 31.7425 8.39302 31.8689 8.59916 31.9548C8.8053 32.0407 9.0266 32.0843 9.24992 32.083C9.66078 32.0865 10.0584 31.9381 10.3666 31.6663L12.7666 29.3497C13.0848 29.0425 13.268 28.6214 13.2758 28.1791C13.2837 27.7369 13.1155 27.3096 12.8083 26.9913C12.501 26.6731 12.08 26.4899 11.6377 26.4821C11.1954 26.4743 10.7682 26.6425 10.4499 26.9497V26.8997Z" fill="currentColor"></path>
                  </svg>
                </div>
                <div>
                  <h4 class="text-xl sm:text-2xl mb-6 text-white">Flexibility</h4>
                  <p class="font-light text-gray-400">The house by the pond cras ornare, some chords for a three moments, like a sense of truth that.</p>
                </div>
              </div>
            </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2767

Tailwind CSS

Wrexa

<section class="pt-24 pb-24 md:pb-40 bg-gray-100" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-6">
      <span class="font-heading text-xl">02</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl">Creative team</span>
    </div>
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="w-full md:w-1/2 px-4 mb-6 md:mb-0">
        <h1 class="font-heading text-5xl sm:text-6xl">Creative team</h1>
      </div>
      <div class="w-full md:w-1/2 px-4 md:text-right">
        <a class="inline-block" href="#">
          <img class="w-16 h-16" src="wrexa-assets/logos/logo-wrexa.svg" alt="">
        </a>
      </div>
    </div>
    <div class="flex flex-wrap justify-center -mx-4 relative">
      <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="z-50 hidden lg:inline-block absolute top-1/2 left-0 ml-2 2xl:ml-4">
        <svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 18L1 10L9 2" stroke="#232126" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
        </svg>
      </button>
      <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="z-50 hidden lg:inline-block absolute top-1/2 right-0 mr-2 2xl:mr-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2768

Tailwind CSS

Wrexa

<section class="pt-32 pb-40 bg-orange-800" x-data="{ pricing: '' }" x-init="pricing = $refs.pricing1.textContent">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-12">
      <span class="font-heading text-xl">05</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl">Pricing</span>
    </div>
    <div class="text-center mb-40">
      <h1 class="font-heading text-5xl sm:text-6xl lg:text-7xl mb-7">Choose the plan</h1>
      <div class="flex items-center justify-center mb-16">
        <span class="text-xl mr-5">Get startet now!</span>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="currentColor"></path>
        </svg>
      </div>
      <div class="inline-flex p-2 items-center border border-gray-400 rounded-full">
          <button :class="{'text-gray-500 hover:text-gray-600 sm:px-10': pricing != $refs.pricing1.textContent, 'bg-white py-2 sm:px-8 shadow': pricing == $refs.pricing1.textContent}" class="inline-flex items-center px-4 bg-white py-2 sm:px-8 shadow rounded-full" x-on:click="pricing = $refs.pricing1.textContent">
            <div :class="{'hidden': pricing != $refs.pricing1.textContent}">
                <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="17" cy="17" r="15.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                  <path d="M22.8897 14.1751L21.825 13.1105C21.7901 13.0755 21.7487 13.0477 21.703 13.0287C21.6574 13.0098 21.6084 13 21.559 13C21.5095 13 21.4605 13.0098 21.4149 13.0287C21.3692 13.0477 21.3278 13.0755 21.2929 13.1105L15.8495 18.8567L12.7294 15.7354C12.6579 15.6639 12.5609 15.6238 12.4598 15.6238C12.3586 15.6238 12.2617 15.6639 12.1901 15.7354L11.1115 16.8148C11.04 16.8863 10.9999 16.9833 10.9999 17.0844C10.9999 17.1855 11.04 17.2825 11.1115 17.354L15.5491 21.8943C15.5901 21.9345 15.6398 21.9645 15.6944 21.9821C15.7491 21.9997 15.807 22.0043 15.8637 21.9956C15.9221 22.0057 15.9821 22.0018 16.0387 21.9842C16.0953 21.9666 16.1469 21.9358 16.1892 21.8943L22.8897 14.7076C22.9603 14.637 23 14.5412 23 14.4413C23 14.3415 22.9603 14.2457 22.8897 14.1751V14.1751Z" fill="#D6D7DA"></path>
                  <defs><rect width="12" height="9" fill="white" transform="translate(11 13)"></rect></defs>
                </svg>
            </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2769

Tailwind CSS

Wrexa

<section class="py-24 md:py-40 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-10">
      <span class="font-heading text-xl">05</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl">Features</span>
    </div>
    <h1 class="text-center font-heading text-4xl sm:text-6xl md:text-7xl mb-24">Be unique with features</h1>
    <div class="flex flex-wrap justify-center -mx-4 mb-20">
      <div class="w-full md:w-1/2 lg:w-auto px-4 mb-8 md:mb-0">
        <a class="h-full max-w-sm mx-auto flex flex-col pt-12 px-14 bg-white rounded-xl" href="#">
          <h5 class="max-w-xs 3xl:pr-10 font-heading text-xl mb-14">Comfort like you've never experienced before.</h5>
          <div class="text-right mt-auto pb-10">
            <span class="inline-block">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="black"></path>
              </svg>
            </span>
          </div>
        </a>
      </div>
      <div class="w-full md:w-1/2 lg:w-auto px-4">
        <a class="h-full max-w-sm mx-auto flex flex-col pt-12 px-14 bg-white rounded-xl" href="#">
          <h5 class="max-w-xs 3xl:pr-10 font-heading text-xl mb-14">Comfort like you've never experienced before.</h5>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2770

Tailwind CSS

Wrexa

<section class="pt-24 md:pt-32 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="pb-24">
      <div class="flex flex-wrap items-center justify-between -mx-4 mb-20">
        <div class="w-full md:w-auto px-4 mb-12 md:mb-0">
          <a href="#">
            <img src="wrexa-assets/logos/wrexa-co-logo-name-dark.svg" alt="">
          </a>
        </div>
        <div class="w-full md:w-auto px-4"><a class="inline-block px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Get started</a></div>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full xl:w-2/6 px-4 mb-16 xl:mb-0">
          <div class="max-w-md">
            <h2 class="font-heading text-4xl mb-10">Have any question? Feel free and text us</h2>
            <p class="font-light mb-6">The house by the pond cras ornare</p>
            <div class="pb-8 border-b border-gray-200"><a class="inline-block mr-6 text-indigo-500 hover:text-indigo-600" href="#">+44 0870 5576 00</a><a class="inline-block text-indigo-500 hover:text-indigo-600" href="#">hello@wrexa.co</a></div>
            <div class="mt-8">
              <a class="inline-flex mr-12 items-center" href="#">
                <img class="mr-4" src="wrexa-assets/logos/brands/messenger.svg" alt="">
                <span class="font-light">chatshxxk</span>
              </a>
              <a class="inline-flex items-center" href="#">
                <img class="mr-4" src="wrexa-assets/logos/brands/snapchat.svg" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2771

Tailwind CSS

Wrexa

<section class="py-24 md:py-40 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-12">
      <span class="font-heading text-xl">07</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl">Contact us</span>
    </div>
    <div class="pb-12 mb-20 border-b">
      <h2 class="font-heading text-5xl sm:text-6xl xl:text-7xl">Have a question?</h2>
    </div>
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <h4 class="font-heading text-3xl mb-12">Visit our studio in London</h4>
        <div class="flex flex-wrap bg-white rounded-xl overflow-hidden">
          <div class="w-full lg:w-1/3">
            <img class="block w-full h-80 lg:h-full object-cover" src="wrexa-assets/images/young-female-student.png" alt="">
          </div>
          <div class="w-full lg:w-2/3">
            <div class="py-12 px-10">
              <span class="text-sm text-gray-400">Address</span>
              <p class="text-2xl font-medium">Oakley Street 59,</p>
              <p class="text-2xl font-medium">08844 UK</p>
              <p class="text-2xl font-medium mb-6">London</p>
              <span class="block mb-8 font-light">Mon - Fr 8:00 - 20:00 CET</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

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

Tailwind Component #2772

Tailwind CSS

Wrexa

<section class="relative pb-24 md:pb-52 bg-orange-900 overflow-hidden">
  <div class="bg-gray-900 h-16">
    <div class="absolute top-0 left-1/2">
      <div class="w-px h-16 bg-white"></div>
      <div class="w-px h-20 bg-gray-800"></div>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mx-auto pt-24 sm:pt-40 text-center">
      <h1 class="font-heading text-4xl sm:text-6xl lg:text-7xl mb-10">
        <span class="block leading-none">Turnover. Even</span>
        <span class="block leading-none">more than you expect</span>
      </h1>
      <div>
        <a class="inline-flex mb-20 items-center text-black" href="#">
          <span class="mr-4">Exploring the shift of today</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Get Started</a>
    </div>
  </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2773

Tailwind CSS

Wrexa

<section class="py-24 md:py-40 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-24">
      <span class="font-heading text-xl">07</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl">Our Blog</span>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
        <div class="max-w-md mx-auto">
          <img class="block w-full h-62 mb-16 object-cover" src="wrexa-assets/images/white-wall-living-room.png" alt="">
          <div class="mb-8">
            <span class="inline-block px-5 py-1 mr-6 text-sm bg-white rounded-full">News</span>
            <span class="font-light text-sm text-gray-700">January 13, 2022</span>
          </div>
          <h4 class="font-heading text-2xl mb-10">Designed by experts, inspired by real life</h4>
          <div class="flex items-center mb-10">
            <img class="w-10 h-10 mr-4 rounded-full" src="wrexa-assets/images/avatar.png" alt="">
            <span class="text-gray-400">Pela Gunder</span>
          </div>
          <a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Learn More</a>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2774

Tailwind CSS

Wrexa

<section class="bg-gray-900 relative overflow-hidden">
  <img class="hidden lg:block absolute top-0 left-0 w-3/5 h-full mt-10 object-cover" src="wrexa-assets/images/young-students.png" alt="">
  <div class="container px-4 mx-auto">
    <div class="w-full lg:w-1/3 pt-32 lg:pb-40 ml-auto">
      <div class="max-w-md mx-auto">
        <div class="flex items-center mb-24">
          <span class="font-heading text-xl text-white">03</span>
          <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
          <span class="font-heading text-xl text-white">Newsletter</span>
        </div>
        <form action="#" method="post">
          <h1 class="font-heading text-4xl sm:text-6xl 3xl:text-7xl text-white mb-16">Join our mailing list</h1>
          <div class="relative flex items-center justify-between lg:justify-start pb-2 mb-16 border-b-2 border-gray-700">
            <div class="w-auto">
              <input class="w-full lg:w-72 pr-6 font-heading text-3xl placeholder-gray-700 text-gray-700 bg-transparent outline-none" type="email" placeholder="Drop Email here">
            </div>
            <div class="w-auto">
              <svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 11.2782L15.4966 9.73549L9.5625 15.8244L9.5625 -3.25103e-07L7.4375 -4.1799e-07L7.4375 15.8244L1.50344 9.73549L-4.92984e-07 11.2782L8.5 20L17 11.2782Z" fill="white"></path>
              </svg>
            </div>
          </div>
          <div class="flex mb-2 items-center">
            <div class="flex mr-6 items-center justify-center w-8 h-8 bg-indigo-500 rounded-full">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2775

Tailwind CSS

Wrexa

<section class="py-24 md:py-32 bg-gray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-24 sm:mb-40">
      <span class="font-heading text-xl">01</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl">Introduction</span>
    </div>
    <div class="max-w-3xl mx-auto text-center mb-32">
      <h1 class="font-heading text-5xl sm:text-6xl md:text-7xl">I’m happy my home found me</h1>
    </div>
    <div class="relative mb-24 lg:mb-64">
      <div class="flex flex-wrap -mx-4 relative z-10">
        <div class="w-full 2xl:w-1/3 px-4 mb-10">
          <div class="max-w-md mx-auto relative">
            <div class="absolute top-0 left-0 -mt-2 w-full">
              <div class="mx-5 rounded-t-xl h-4 bg-gray-200"></div>
            </div>
            <div class="py-12 px-8 sm:p-12 bg-white rounded-xl relative">
              <div class="sm:flex mb-8">
                <div class="flex-shrink-0 flex items-center justify-center w-24 h-24 rounded-full bg-white border border-gray-200">
                  <div class="flex items-center justify-center w-18 h-18 rounded-full bg-gray-100">
                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-green-900 text-white">1</div>
                  </div>
                </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2776

Tailwind CSS

Wrexa

<section class="relative pt-24 pb-40 bg-gray-100">
  <img class="absolute bottom-0 left-0 w-full" src="wrexa-assets/elements/triple-circle-wide.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="sm:flex mb-32"><a class="inline-block w-full sm:w-auto sm:mr-24 md:mr-40 mb-2 sm:mb-0" href="#">Download application</a><a class="inline-block w-full sm:w-auto sm:mr-auto mb-2 sm:mb-0" href="#">Select plan</a><a class="inline-block w-full sm:w-auto" href="#">Start a conversation</a></div>
    <div class="max-w-5xl mx-auto mb-32 text-center">
      <h2 class="font-heading text-4xl md:text-5xl xl:text-6xl mb-10">Cloud backup solutions for home and business</h2>
      <p class="text-gray-800 font-light">The house like a sense of truth that comes from within. The final game.</p>
    </div>
    <div class="flex flex-wrap justify-center items-end -mx-4 -mb-16">
      <div class="w-full sm:w-auto px-4 mb-16">
        <div class="max-w-xs mx-auto px-10">
          <img class="block mx-auto mb-16" src="wrexa-assets/logos/brands/miro-clouds.svg" alt="">
          <div class="relative h-10 text-center">
            <div class="absolute top-0 right-1/2 transform translate-x-1/2 -mt-3 text-white">
              <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.16137 1.29115C6.55567 0.684092 7.44433 0.684092 7.83863 1.29115L13.7909 10.4553C14.223 11.1206 13.7456 12 12.9523 12H1.04771C0.254427 12 -0.22302 11.1206 0.209087 10.4553L6.16137 1.29115Z" fill="currentColor"></path>
              </svg>
            </div>
            <span class="block py-1 px-4 bg-white rounded-full">Miro</span>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-auto px-4 mb-16">
        <div class="max-w-xs mx-auto px-10 sm:px-0">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2777

Tailwind CSS

Wrexa

<div class="fixed left-0 right-0 bottom-0 z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="py-9 md:px-24 bg-gray-100">
    <div class="px-4 mx-auto">
      <div class="pt-10 pb-12 px-8 md:px-12 xl:px-24 bg-white rounded-2xl">
        <div class="flex flex-wrap items-end justify-between">
          <div class="w-full 2xl:w-7/12 mb-8 2xl:mb-0">
            <h3 class="font-heading text-3xl mb-2">Cookies on this site</h3>
            <p class="text-sm font-light text-gray-500">By clicking accept, you agree to the storing of cookies on your device to enhance site navigation. Cookies are important to the proper functioning of a site....</p>
          </div>
          <div class="w-full 2xl:w-auto ml-auto"><a x-on:click.prevent="open=false" class="inline-block w-full sm:w-auto px-7 py-4 mb-4 sm:mb-0 sm:mr-5 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Accept All Cookies</a><a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium border border-gray-900 hover:text-gray-700 rounded" href="#">Settings</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2778

Tailwind CSS

Wrexa

<section class="pb-40 pt-40 md:pt-96 bg-indigo-200 relative overflow-hidden">
  <img class="hidden sm:block absolute top-0 bottom-0 left-0 h-full ml-40 md:ml-64 object-contain" src="wrexa-assets/images/men-drinkin-caffe-big.png" alt="">
  <img class="sm:hidden absolute bottom-0 left-0 ml-20 max-h-128 object-contain" src="wrexa-assets/images/men-drinkin-caffe-big.png" alt="">
  <div class="hidden xl:block absolute top-0 left-0 w-8 h-full bg-white"></div>
  <div class="container px-4 mx-auto relative">
    <div class="max-w-xs sm:max-w-xl lg:max-w-4xl 2xl:max-w-6xl sm:ml-12 md:ml-24">
      <h2 class="text-4xl sm:text-6xl lg:text-8xl 2xl:text-9xl text-white mb-24">
        <span class="relative">
          <span>Something has</span>
          <div class="hidden sm:block absolute bottom-0 left-0 mb-2 sm:mb-4 2xl:mb-8 h-px w-full bg-white"></div>
        </span>
        <span class="relative">
          <span>gone wrong.</span>
          <div class="hidden sm:block absolute bottom-0 left-0 mb-2 sm:mb-4 2xl:mb-8 h-px w-full bg-white"></div>
        </span>
      </h2>
      <p class="flex items-center mb-16">
        <span class="mr-4 text-xl text-white">We can’t find that page. Back to home.</span>
        <span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="white"></path>
          </svg>
        </span>
      </p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2779

Tailwind CSS

Wrexa

<section class="bg-white">
  <div class="md:ml-10 py-24 md:py-40 bg-gray-900">
    <div class="container px-4 mx-auto">
      <div class="pb-20 mb-16 border-b border-gray-700">
        <h1 class="font-heading text-5xl sm:text-6xl md:text-7xl text-white mb-32">About company</h1>
        <div class="flex flex-wrap -mx-4">
          <div class="w-full lg:w-1/2 px-4 mb-32 lg:mb-0">
            <div class="max-w-md mx-auto relative">
              <img class="block mx-auto" src="wrexa-assets/images/women-photo-orange-couch.png" alt="">
              <img class="absolute bottom-0 left-0 md:-ml-8 -mb-20" src="wrexa-assets/images/women-photo2.png" alt="">
            </div>
          </div>
          <div class="w-full lg:w-1/2 px-4">
            <div class="max-w-md mx-auto">
              <h1 class="font-heading text-5xl sm:text-6xl text-white mb-8">What you need, when you need it</h1>
              <p class="max-w-sm font-light text-xl text-white mb-8">The pond cras ornare, some chords for a three moments, like a sense of truth that comes from within.</p>
              <p class="font-light text-gray-600 mb-20">The pond cras ornare, some chords for a three moments, like a sense of truth that comes from within.</p>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="max-w-xl 3xl:max-w-3xl mx-auto">
          <div class="flex flex-wrap -mx-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2780

Tailwind CSS

Wrexa

<section class="py-24 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mb-32">
      <h2 class="font-heading text-4xl sm:text-6xl xl:text-7xl text-white">Enthralling global photography</h2>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-2/6 px-4 mb-16 lg:mb-0">
        <a class="block max-w-md text-white hover:text-gray-200" href="#">
          <img class="block w-full h-64 object-cover mb-6" src="wrexa-assets/images/phone-on-table.png" alt="">
          <div class="flex items-center">
            <span class="font-heading text-xl">01</span>
            <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
            <span class="font-heading text-xl">New Workspace</span>
          </div>
        </a>
      </div>
      <div class="w-full lg:w-2/6 3xl:w-1/6 px-4 lg:mt-96 mb-16 lg:mb-0">
        <a class="block max-w-xs text-white hover:text-gray-200" href="#">
          <img class="block w-full h-80 object-cover mb-6" src="wrexa-assets/images/mom-son-photo.png" alt="">
          <div class="flex items-center">
            <span class="font-heading text-xl">02</span>
            <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
            <span class="font-heading text-xl">Home in North England</span>
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

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

Framework

UI Library

Components

Tailwind Component #2761

Get the code for 13,400+ components

Light footer with CTA heading, link columns, legal links, and copyright

Tailwind Component #2762

Get the code for 13,400+ components

Split-Screen App Download Promo with Device Mockup

Tailwind Component #2763

Get the code for 13,400+ components

Dark Minimal Top Navigation Bar with Logo and Menu Toggle

Tailwind Component #2764

Get the code for 13,400+ components

Tailwind Component #2765

Get the code for 13,400+ components

Tailwind Component #2766

Get the code for 13,400+ components

Tailwind Component #2767

Get the code for 13,400+ components

Tailwind Component #2768

Get the code for 13,400+ components

Tailwind Component #2769

Get the code for 13,400+ components

Tailwind Component #2770

Get the code for 13,400+ components

Tailwind Component #2771

Get the code for 13,400+ components

Tailwind Component #2772

Get the code for 13,400+ components

Tailwind Component #2773

Get the code for 13,400+ components

Tailwind Component #2774

Get the code for 13,400+ components

Tailwind Component #2775

Get the code for 13,400+ components

Tailwind Component #2776

Get the code for 13,400+ components

Tailwind Component #2777

Get the code for 13,400+ components

Tailwind Component #2778

Get the code for 13,400+ components

Tailwind Component #2779

Get the code for 13,400+ components

Tailwind Component #2780

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

From one prompt to production‑ready code

Products

Extensions

UI Components

Company

Support