UI Components in Asitrastudio library

Framework

UI Library

Components

Tailwind Component #41

Tailwind CSS

asitrastudio

<div class="fixed bottom-0 left-0 w-full pt-8 pb-10 z-50">
  <div class="flex px-6 justify-center">
    <div class="inline-flex py-4 pl-5 pr-6 items-center bg-yellow-100 border border-yellow-300 rounded-3xl">
      <span class="mr-4">
        <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M11.5013 1.91669C6.2169 1.91669 1.91797 6.21562 1.91797 11.5C1.91797 16.7844 6.2169 21.0834 11.5013 21.0834C16.7857 21.0834 21.0846 16.7844 21.0846 11.5C21.0846 6.21562 16.7857 1.91669 11.5013 1.91669ZM12.1817 16.9721C11.9997 17.1443 11.7502 17.25 11.5013 17.25C11.2519 17.25 11.003 17.1443 10.8209 16.9721C10.6483 16.79 10.543 16.5406 10.543 16.2917C10.543 16.0423 10.6483 15.7933 10.8209 15.6113C11.185 15.2566 11.8172 15.2566 12.1817 15.6113C12.3539 15.7933 12.4596 16.0423 12.4596 16.2917C12.4596 16.5505 12.3539 16.79 12.1817 16.9721ZM12.4596 12.4584C12.4596 12.9876 12.0305 13.4167 11.5013 13.4167C10.9721 13.4167 10.543 12.9876 10.543 12.4584V6.70835C10.543 6.17912 10.9721 5.75002 11.5013 5.75002C12.0305 5.75002 12.4596 6.17912 12.4596 6.70835V12.4584Z" fill="#F0B400"></path>
        </svg>
      </span>
      <p class="text-yellow-900">Please check your email to confirm your address befere you can see 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

Yellow Warning Notification Banner: Email Confirmation Required

A single-line yellow alert banner with a rounded outlined container, a warning icon, and a message asking the user to confirm their email address before viewing content. It has no dismiss control or action button visible.

Tailwind Component #42

Tailwind CSS

asitrastudio

<section class="py-12 md:py-24 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <h1 class="font-heading text-6xl md:text-10xl mb-8 tracking-tightest">About us</h1>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-3/12 xl:w-2/12 px-4 mb-14 lg:mb-0">
        <a class="group inline-flex items-center leading-none font-medium pb-2 border-b-2 border-black" href="#">
          <span class="mr-4">Get to know us</span>
          <span class="group-hover:rotate-45 transform transition duration-100">
            <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
        </a>
      </div>
      <div class="w-full lg:w-9/12 xl:w-10/12 px-4">
        <div class="lg:max-w-5xl lg:ml-20 lg:-mt-6">
          <p class="text-xl xs:text-2xl tracking-tight mb-10" style="text-indent: 6rem;">
            <span>KW70 Fix is a leading real estate investment firm in the World, headquartered in New York with offices in</span>
            <span class="italic text-coolGray-600">London, Chicago, Barcelona, Vienna, Rome, Las Vegas.</span>
            <span>KW70 Fix initiative seeks out regions and markets with robust underlying catalysts, and expertise to such as burgeoning technology sectors, a diverse workforce, and a strong entrepreneurial culture.</span>
          </p>
          <ul>
            <li class="flex items-center justify-between mb-8 pb-2 border-b-2 border-black">

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

About Us Section with Company Description and Statistics

A light-background about section with a large heading, short link, descriptive paragraph about a real estate investment firm, and four labeled statistic rows separated by horizontal rules. Content is arranged in a two-column split with the heading and link on the left and text and stats on the right.

Tailwind Component #43

Tailwind CSS

asitrastudio

<section class="py-12 md:py-20 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-5/12 xl:w-1/3 px-4 mb-20 lg:mb-0">
        <h1 class="font-heading text-6xl sm:text-8xl md:text-10xl tracking-tighter mb-10">Meet the team</h1>
      </div>
      <div class="w-full lg:w-7/12 xl:w-8/12 px-4">
        <div class="max-w-3xl lg:ml-auto">
          <div class="flex pb-6 mb-6 items-center border-b border-black">
            <img class="block w-18 xs:w-auto" src="asitrastudio-assets/team/avatar-medium-1.png" alt="">
            <div class="ml-9">
              <span class="block mb-3 text-sm text-coolGray-600">Executive Chairman</span>
              <h4 class="text-2xl xs:text-3xl sm:text-4xl">Thomas Webb</h4>
            </div>
          </div>
          <div class="flex pb-6 mb-6 items-center border-b border-black">
            <img class="block w-18 xs:w-auto" src="asitrastudio-assets/team/avatar-medium-2.png" alt="">
            <div class="ml-9">
              <span class="block mb-3 text-sm text-coolGray-600">Chief People Officer</span>
              <h4 class="text-2xl xs:text-3xl sm:text-4xl">Arlene McCoy</h4>
            </div>
          </div>
          <div class="flex pb-6 mb-6 items-center border-b border-black">
            <img class="block w-18 xs:w-auto" src="asitrastudio-assets/team/avatar-medium-3.png" 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

Meet the Team Staff Listing with Circular Avatars

A split-layout team section with a large "Meet the team" heading on the left and a vertical list of six members on the right, each showing a circular headshot, job title, and name separated by horizontal rules. It presents people rather than products or app features, with no interactive controls visible.

Tailwind Component #44

Tailwind CSS

asitrastudio

<section class="py-12 md:py-20 bg-coolGray-100">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="max-w-xl mx-auto lg:mx-0">
          <div class="max-w-lg mb-10">
            <h1 class="font-heading text-6xl xs:text-8xl sm:text-9xl xl:text-10xl tracking-tighter mb-8">Let`s talk</h1>
            <p class="text-xl text-coolGray-600">Whereby Embedded is the easiest way to embed video calls directly into your app, website, or anywhere else you need beautiful, custom video chat – that just works.</p>
          </div>
          <div class="flex flex-wrap -mx-4 mb-20">
            <div class="w-full sm:w-1/2 px-4 mb-6 sm:mb-0">
              <div class="py-6 text-center border border-coolGray-300 rounded-3xl">
                <span class="block mb-2 text-sm text-coolGray-500">Call us</span>
                <span class="font-medium">+48 291 821 114</span>
              </div>
            </div>
            <div class="w-full sm:w-1/2 px-4">
              <div class="py-6 text-center border border-coolGray-300 rounded-3xl">
                <span class="block mb-2 text-sm text-coolGray-500">Email us</span>
                <span class="font-medium">contact@example.com</span>
              </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

Contact Section with Contact Form, Phone and Email Cards, and Map

A two-column contact section with a heading, intro text, phone and email info cards, a location address with a map preview on the left, and a white contact form with rounded inputs and a black Send message button on the right.

Tailwind Component #45

Tailwind CSS

asitrastudio

<div class="fixed bottom-0 right-0 w-full bg-white rounded-t-3xl z-50" x-data="{ open: true }" x-show="open">
  <div class="relative pt-8 pb-9 px-8">
    <button class="absolute top-0 right-0 mt-4 mr-6 p-0 text-xl" x-on:click="open = false">
      <svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M7.5 6.45616L7.42929 6.38545L1.96352 0.919676C1.96351 0.919673 1.96351 0.919669 1.96351 0.919666C1.75876 0.714984 1.4811 0.6 1.19159 0.6C0.902079 0.6 0.624425 0.71498 0.419676 0.919655C0.419669 0.919662 0.419662 0.919669 0.419655 0.919676M7.5 6.45616L0.419655 0.919676M7.5 6.45616L7.57071 6.38545M7.5 6.45616L7.57071 6.38545M0.419655 0.919676C0.21498 1.12442 0.1 1.40208 0.1 1.69159C0.1 1.9811 0.214984 2.25876 0.419666 2.46351M0.419655 0.919676L0.419666 2.46351M0.419666 2.46351C0.419669 2.46351 0.419673 2.46351 0.419676 2.46352M0.419666 2.46351L0.419676 2.46352M0.419676 2.46352L5.88545 7.92929M0.419676 2.46352L5.88545 7.92929M7.57071 6.38545L13.0365 0.919676C13.0365 0.919673 13.0365 0.919669 13.0365 0.919666C13.2412 0.714984 13.5189 0.6 13.8084 0.6C14.0979 0.6 14.3756 0.71498 14.5803 0.919655C14.785 1.12441 14.9 1.40207 14.9 1.69159C14.9 1.9811 14.785 2.25876 14.5803 2.46351C14.5803 2.46351 14.5803 2.46351 14.5803 2.46352L9.11455 7.92929L9.04384 8L9.11455 8.07071L14.5803 13.5365C14.5803 13.5365 14.5803 13.5365 14.5803 13.5365M7.57071 6.38545L14.5803 13.5365M5.95616 8L5.88545 8.07071L0.419676 13.5365C0.419673 13.5365 0.419669 13.5365 0.419666 13.5365C0.214984 13.7412 0.1 14.0189 0.1 14.3084C0.1 14.5979 0.21498 14.8756 0.419655 15.0803C0.624405 15.285 0.902069 15.4 1.19159 15.4C1.4811 15.4 1.75876 15.285 1.96351 15.0803C1.96351 15.0803 1.96351 15.0803 1.96352 15.0803L7.42929 9.61455L7.5 9.54384L7.57071 9.61455L13.0365 15.0803C13.0365 15.0803 13.0365 15.0803 13.0365 15.0803C13.2412 15.285 13.5189 15.4 13.8084 15.4C14.0979 15.4 14.3756 15.285 14.5803 15.0803C14.5803 15.0803 14.5803 15.0803 14.5803 15.0803M5.95616 8L14.5803 15.0803M5.95616 8L5.88545 7.92929M5.95616 8L5.88545 7.92929M14.5803 15.0803C14.785 14.8756 14.9 14.5979 14.9 14.3084C14.9 14.0189 14.785 13.7412 14.5803 13.5365M14.5803 15.0803L14.5803 13.5365" fill="#222222" stroke="black" stroke-width="1"></path>
      </svg>
    </button>
    <div class="container mx-auto px-4">
      <div class="max-w-md mx-auto md:max-w-none">
        <div class="flex flex-wrap -mx-4 items-center lg:items-end">
          <div class="w-full md:w-8/12 px-4 mb-8 lg:mb-0">
            <div class="md:flex">
              <div class="mb-4 md:mb-0 mr-8">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.082 12.8333C12.0485 12.8333 12.832 12.0498 12.832 11.0833C12.832 10.1168 12.0485 9.33331 11.082 9.33331C10.1155 9.33331 9.33203 10.1168 9.33203 11.0833C9.33203 12.0498 10.1155 12.8333 11.082 12.8333Z" fill="black"></path>
                  <path d="M21.582 3.5C22.5485 3.5 23.332 2.7165 23.332 1.75C23.332 0.783502 22.5485 0 21.582 0C20.6155 0 19.832 0.783502 19.832 1.75C19.832 2.7165 20.6155 3.5 21.582 3.5Z" fill="black"></path>
                  <path d="M25.082 9.33331C26.0485 9.33331 26.832 8.54981 26.832 7.58331C26.832 6.61681 26.0485 5.83331 25.082 5.83331C24.1155 5.83331 23.332 6.61681 23.332 7.58331C23.332 8.54981 24.1155 9.33331 25.082 9.33331Z" fill="black"></path>
                  <path d="M11.082 18.6667C12.0485 18.6667 12.832 17.8832 12.832 16.9167C12.832 15.9502 12.0485 15.1667 11.082 15.1667C10.1155 15.1667 9.33203 15.9502 9.33203 16.9167C9.33203 17.8832 10.1155 18.6667 11.082 18.6667Z" fill="black"></path>
                  <path d="M16.918 18.6667C17.8845 18.6667 18.668 17.8832 18.668 16.9167C18.668 15.9502 17.8845 15.1667 16.918 15.1667C15.9515 15.1667 15.168 15.9502 15.168 16.9167C15.168 17.8832 15.9515 18.6667 16.918 18.6667Z" fill="black"></path>
                  <path d="M27.9335 12.663C27.9076 12.3933 27.7887 12.141 27.5971 11.9494C27.4055 11.7578 27.1532 11.6389 26.8835 11.613C24.1881 11.3533 21.667 10.1641 19.7523 8.24923C17.8377 6.33436 16.6487 3.8131 16.3893 1.11767C16.3635 0.84795 16.2445 0.595643 16.053 0.40405C15.8614 0.212457 15.6091 0.0935253 15.3393 0.0676667C14.8972 0.0245 14.4515 0 14 0C11.2311 0 8.52431 0.821086 6.22202 2.35943C3.91973 3.89777 2.12532 6.08427 1.06569 8.64243C0.006066 11.2006 -0.271181 14.0155 0.269012 16.7313C0.809205 19.447 2.14258 21.9416 4.10051 23.8995C6.05845 25.8574 8.55301 27.1908 11.2687 27.731C13.9845 28.2712 16.7994 27.9939 19.3576 26.9343C21.9157 25.8747 24.1022 24.0803 25.6406 21.778C27.1789 19.4757 28 16.7689 28 14C28 13.5485 27.9755 13.1028 27.9335 12.663ZM14 25.6667C10.9058 25.6667 7.93835 24.4375 5.75043 22.2496C3.5625 20.0617 2.33334 17.0942 2.33334 14C2.33334 10.9058 3.5625 7.93835 5.75043 5.75042C7.93835 3.5625 10.9058 2.33333 14 2.33333H14.1983C14.6841 5.19838 16.049 7.84141 18.1038 9.89622C20.1586 11.951 22.8016 13.3159 25.6667 13.8017C25.6667 13.8682 25.6667 13.9335 25.6667 14C25.6633 17.0932 24.433 20.0586 22.2458 22.2458C20.0586 24.433 17.0932 25.6633 14 25.6667Z" fill="black"></path>
                </svg>
              </div>
              <div class="max-w-md lg:max-w-lg xl:max-w-none">
                <h4 class="text-2xl font-medium tracking-tight mb-4">Cookie Consent</h4>

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 Consent Banner with Accept and Decline Buttons

A cookie consent notice with a cookie icon, heading, explanatory paragraph, and two rounded buttons for accepting or declining cookies, plus a close icon in the top right. The layout is a horizontal row with text on the left and stacked actions on the right.

Tailwind Component #46

Tailwind CSS

asitrastudio

<section class="relative bg-coolGray-50">
  <div class="py-6 border-t border-coolGray-200">
    <div class="container mx-auto px-4">
      <div>
        <a class="inline-block text-black" href="#">Homepage</a>
        <span class="inline-block mx-4">/</span>
        <a class="inline-block text-black" href="#">Services</a>
        <span class="inline-block mx-4">/</span>
        <a class="inline-block text-black" href="#">Lorem Ipsum</a>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Breadcrumb Navigation Bar with Homepage, Services, and Lorem Ipsum

A horizontal breadcrumb trail showing a page hierarchy separated by slash dividers, with Homepage, Services, and Lorem Ipsum as text links on a light gray background. It provides location context and navigation within a site.

Tailwind Component #47

Tailwind CSS

asitrastudio

<section class="pt-10 pb-24 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <a class="inline-block mb-24" href="#">
      <img class="block h-7" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
    </a>
    <div class="max-w-md mx-auto text-center">
      <form action="">
        <h3 class="text-3xl font-medium tracking-tight mb-10">Sign in to studio</h3>
        <a class="flex h-15 mb-2 items-center justify-center py-2 px-8 font-medium text-sm sm:text-base tracking-tight bg-white border-1.5 border-transparent hover:border-coolGray-400 rounded-full" href="#">
          <img src="asitrastudio-assets/sign-in/google.svg" alt="">
          <span class="ml-4 text-sm text-black">Sign in with Google</span>
        </a>
        <a class="flex h-15 mb-8 items-center justify-center py-2 px-8 font-medium text-sm sm:text-base tracking-tight bg-white border-1.5 border-transparent hover:border-coolGray-400 rounded-full" href="#">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.7478 0C12.7876 0 12.8274 0 12.8695 0C12.9671 1.20593 12.5068 2.107 11.9474 2.75952C11.3985 3.40754 10.6469 4.03603 9.43117 3.94067C9.35007 2.75201 9.81112 1.91777 10.3698 1.26675C10.8879 0.660032 11.8378 0.120142 12.7478 0Z" fill="#222222"></path>
            <path d="M16.4254 12.5517C16.4254 12.5638 16.4254 12.5743 16.4254 12.5855C16.0837 13.6203 15.5964 14.5071 15.0017 15.33C14.4588 16.0772 13.7935 17.0826 12.6056 17.0826C11.5791 17.0826 10.8973 16.4226 9.84534 16.4046C8.73252 16.3865 8.12055 16.9565 7.10309 17.0999C6.98671 17.0999 6.87032 17.0999 6.75618 17.0999C6.00905 16.9917 5.40608 16.4 4.96681 15.8669C3.67153 14.2916 2.6706 12.2566 2.48438 9.65256C2.48438 9.39725 2.48438 9.1427 2.48438 8.8874C2.56322 7.02369 3.46879 5.5084 4.67247 4.77403C5.30772 4.38357 6.181 4.05092 7.1534 4.1996C7.57015 4.26418 7.9959 4.40685 8.36909 4.54801C8.72276 4.68392 9.16504 4.92496 9.58403 4.91219C9.86787 4.90393 10.1502 4.75601 10.4363 4.65164C11.2743 4.34903 12.0958 4.00212 13.1785 4.16506C14.4798 4.36179 15.4034 4.93998 15.9741 5.83203C14.8733 6.53261 14.003 7.58836 14.1517 9.39125C14.2838 11.0289 15.236 11.9871 16.4254 12.5517Z" fill="#222222"></path>
          </svg>
          <span class="ml-4 text-sm text-black">Sign in with Apple</span>
        </a>
        <div class="flex mb-8 items-center">
          <div class="py-px w-full bg-coolGray-100"></div>
          <span class="text-xs mx-5 text-coolGray-600 uppercase">or</span>
          <div class="py-px w-full bg-coolGray-100"></div>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #48

Tailwind CSS

asitrastudio

<section class="py-12 md:py-24 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <div class="max-w-md mx-auto lg:max-w-none">
      <h1 class="font-heading text-6xl md:text-10xl tracking-tighter mb-20">Services</h1>
      <div class="flex flex-wrap -mx-3">
        <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
          <a class="relative group block h-full w-full px-9 py-14 hover:bg-black border rounded-4xl transition duration-300" href="#">
            <span class="hidden group-hover:block absolute top-0 right-0 mt-16 mr-8">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 2L2 22" stroke="white" stroke-width="3.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M22 20.3393V2H3.66071" stroke="white" stroke-width="3.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
            <div>
              <div class="max-w-xs pr-10">
                <h5 class="text-3xl xs:text-4xl group-hover:text-white mb-6">De-risking your project</h5>
              </div>
              <p class="group-hover:text-white">We follow the RIBA Plan of Work 2020 to ensure an orderly framework and project clarity from the outset. First, we conduct feasibility studies and a project review.</p>
            </div>
          </a>
        </div>
        <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
          <a class="relative group block h-full w-full px-9 py-14 hover:bg-black border rounded-4xl transition duration-300" href="#">
            <span class="hidden group-hover:block absolute top-0 right-0 mt-16 mr-8">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Services Section with Three Outlined Cards

A marketing section headed by a large 'Services' title above three equal-width outlined rounded cards, each with a heading and short paragraph describing a project phase. The layout is a horizontal row of cards on a light background with no visible buttons or images.

Tailwind Component #49

Tailwind CSS

asitrastudio

<section class="py-12 md:py-20 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <h1 class="font-heading text-6xl sm:text-8xl md:text-10xl tracking-tighter mb-20">Get started quickly</h1>
    <div class="mb-6 pb-10 pt-20 lg:pt-10 px-10 max-w-xl lg:max-w-none mx-auto bg-white rounded-4xl">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-7/12 px-4 mb-12 lg:mb-0">
          <div class="max-w-sm xl:max-w-lg mx-auto">
            <h3 class="text-5xl xl:text-7xl tracking-tight mb-6">Althhorpe Street Leamigton Spa</h3>
            <p class="max-w-md text-lg text-coolGray-600 mb-10">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
            <a class="group inline-flex py-5 px-8 items-center justify-center leading-none font-medium text-black hover:text-white border border-black rounded-full hover:bg-black transition duration-200" href="#">
              <span class="mr-2">Get consulation</span>
              <span class="group-hover:rotate-45 transform transition duration-100">
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9 1L1 9" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9 8.33571V1H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-5/12">
          <img class="block w-full rounded-4xl" src="asitrastudio-assets/features/photo-medium-dark.png" alt="">
        </div>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Get Started Quickly Alternating Feature Rows with Dashboard Screenshots

A marketing section headed "Get started quickly" containing two alternating feature rows, each pairing a heading, body text, and a "Get consultation" outlined button with a dashboard screenshot inside a rounded tinted frame. The layout is a split-screen feature section on a light background.

Tailwind Component #50

Tailwind CSS

asitrastudio

<section x-data="{ mobileNavOpen: false }">
  <nav>
    <div class="container mx-auto px-4">
      <div class="relative flex h-24 items-center">
        <div class="hidden xl:flex items-center"><a class="inline-block hover:underline mr-10" href="#">About</a><a class="inline-block hover:underline mr-10" href="#">Services</a></div>
        <a class="hidden xl:block absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" href="#">
          <img class="h-5" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
        </a>
        <a class="xl:hidden inline-block" href="#">
          <img class="h-5" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="xl:hidden py-1 ml-auto">
          <svg width="44" height="16" viewBox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="44" height="2" rx="1" fill="black"></rect><rect y="14" width="44" height="2" rx="1" fill="black"></rect></svg>
        </button>
        <div class="hidden xl:flex ml-auto mr-12 items-center"><a class="inline-block hover:underline mr-10" href="#">Projects</a><a class="inline-block hover:underline" href="#">Contact us</a></div>
        <a class="group hidden xl:inline-flex py-4 px-8 items-center justify-center leading-none font-medium text-black hover:text-white border border-black rounded-full hover:bg-black transition duration-200" href="#">
          <span class="mr-2">Get consulation</span>
          <span class="group-hover:rotate-45 transform transition duration-100">
            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1L1 9" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.33571V1H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
        </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

Minimal Top Navigation Bar with Centered Logo and CTA Button

A horizontal header navigation bar with text links (About, Services, Projects, Contact us) on either side of a centered wordmark logo, ending with an outlined pill-shaped call-to-action button labeled 'Get consulation' with an arrow icon. The layout is clean and minimal on a light background.

Tailwind Component #51

Tailwind CSS

asitrastudio

<section class="pt-10 pb-24 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <a class="inline-block mb-24" href="#">
      <img src="asitrastudio-assets/logos/logo-asi.svg" alt="">
    </a>
    <div class="max-w-md mx-auto text-center">
      <form action="">
        <h3 class="text-3xl font-medium tracking-tight mb-10">Sign up to studio</h3>
        <a class="flex h-15 items-center justify-center py-2 px-8 font-medium text-sm sm:text-base tracking-tight bg-white border-1.5 border-transparent hover:border-coolGray-300 mb-2 rounded-full" href="#">
          <img src="asitrastudio-assets/sign-in/google.svg" alt="">
          <span class="ml-2 sm:ml-4 text-black">Sign up with Google</span>
        </a>
        <a class="flex h-15 items-center justify-center py-2 px-8 font-medium text-sm sm:text-base tracking-tight bg-white border-1.5 border-transparent hover:border-coolGray-300 mb-8 rounded-full" href="#">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.7478 0C12.7876 0 12.8274 0 12.8695 0C12.9671 1.20593 12.5068 2.107 11.9474 2.75952C11.3985 3.40754 10.6469 4.03603 9.43117 3.94067C9.35007 2.75201 9.81112 1.91777 10.3698 1.26675C10.8879 0.660032 11.8378 0.120142 12.7478 0Z" fill="#222222"></path>
            <path d="M16.4254 12.5517C16.4254 12.5638 16.4254 12.5743 16.4254 12.5855C16.0837 13.6203 15.5964 14.5071 15.0017 15.33C14.4588 16.0772 13.7935 17.0826 12.6056 17.0826C11.5791 17.0826 10.8973 16.4226 9.84534 16.4046C8.73252 16.3865 8.12055 16.9565 7.10309 17.0999C6.98671 17.0999 6.87032 17.0999 6.75618 17.0999C6.00905 16.9917 5.40608 16.4 4.96681 15.8669C3.67153 14.2916 2.6706 12.2566 2.48438 9.65256C2.48438 9.39725 2.48438 9.1427 2.48438 8.8874C2.56322 7.02369 3.46879 5.5084 4.67247 4.77403C5.30772 4.38357 6.181 4.05092 7.1534 4.1996C7.57015 4.26418 7.9959 4.40685 8.36909 4.54801C8.72276 4.68392 9.16504 4.92496 9.58403 4.91219C9.86787 4.90393 10.1502 4.75601 10.4363 4.65164C11.2743 4.34903 12.0958 4.00212 13.1785 4.16506C14.4798 4.36179 15.4034 4.93998 15.9741 5.83203C14.8733 6.53261 14.003 7.58836 14.1517 9.39125C14.2838 11.0289 15.236 11.9871 16.4254 12.5517Z" fill="#222222"></path>
          </svg>
          <span class="ml-2 sm:ml-4 text-black">Sign up with Apple</span>
        </a>
        <div class="flex mb-8 items-center">
          <div class="py-px w-full bg-coolGray-200"></div>
          <span class="text-xs mx-5 text-coolGray-600 uppercase">or</span>
          <div class="py-px w-full bg-coolGray-200"></div>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #52

Tailwind CSS

asitrastudio

<section class="py-12 md:py-20 bg-coolGray-50 overflow-hidden" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 items-center mb-20">
      <div class="w-full lg:w-8/12 xl:w-1/2 px-4 mb-8 lg:mb-0">
        <h1 class="font-heading text-6xl md:text-10xl tracking-tighter">Meet the team</h1>
      </div>
      <div class="w-full lg:w-4/12 xl:w-1/2 px-4">
        <div class="flex items-center justify-end">
          <button class="inline-flex h-16 sm:h-18 w-16 sm:w-18 mr-8 items-center justify-center text-black hover:text-white hover:bg-black border border-black rounded-full transition duration-200" x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount">
            <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.7051 7.12817L4.15732 13.6759L10.7051 20.2237" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M22.4941 13.6759H4.33949" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <button class="inline-flex h-16 sm:h-18 w-16 sm:w-18 items-center justify-center text-black hover:text-white hover:bg-black border border-black rounded-full transition duration-200" x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1">
            <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.2949 7.12817L22.8427 13.6759L16.2949 20.2237" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M4.50586 13.6759H22.6605" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="transition-transform duration-500 ease-in-out">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #53

Tailwind CSS

asitrastudio

<section class="py-12 md:py-24 bg-black">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 xl:w-7/12 px-4 mb-20 lg:mb-0">
        <div class="max-w-xl mx-auto lg:mx-0">
          <span class="block mb-4 font-medium text-white text-sm">Lorem Ipsum</span>
          <div class="max-w-sm xl:max-w-md mb-12">
            <h1 class="font-heading text-6xl xs:text-8xl sm:text-8xl xl:text-10xl tracking-tighter text-white">Sign up for free weekly newsletter</h1>
          </div>
          <div>
            <div class="sm:flex lg:max-w-md xl:max-w-xl">
              <div class="w-full mb-3 sm:mb-0 mr-4">
                <input class="w-full h-15 py-4 px-8 text-coolGray-500 placeholder-coolGray-600 bg-black border-1.5 border-coolGray-700 rounded-full" type="email" placeholder="Enter your email">
              </div>
              <div class="w-full sm:w-auto sm:flex-shrink-0">
                <button class="inline-block w-full sm:w-auto h-15 py-4 px-8 text-center font-medium text-black hover:text-white leading-none bg-white hover:bg-blue-500 rounded-full transition duration-150" type="submit">Sign Up</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 xl:w-5/12 px-4">
        <div class="max-w-xl lg:max-w-none mx-auto">
          <div class="flex flex-wrap -mx-4 h-full">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #54

Tailwind CSS

asitrastudio

<section class="py-12 md:py-24 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 mb-16">
      <div class="lg:w-8/12 px-4 mb-12 lg:mb-0">
        <h1 class="font-heading text-6xl md:text-10xl mb-8 tracking-tightest">About us</h1>
        <p class="text-2xl tracking-tight">
          <span>KW70 Fix is a leading real estate investment firm in the World, headquartered in New York with offices in</span>
          <span class="text-coolGray-600">London, Chicago, Barcelona, Vienna, Rome, Las Vegas.</span>
        </p>
      </div>
      <div class="lg:w-4/12 px-4 text-right lg:mt-8">
        <a class="group inline-flex items-center leading-none font-medium pb-2 border-b-2 border-black" href="#">
          <span class="mr-4">Get to know us</span>
          <span class="group-hover:rotate-45 transform transition duration-100">
            <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
        </a>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 xl:w-7/12 px-4 mb-20 xl: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

Tailwind Component #55

Tailwind CSS

asitrastudio

<section class="py-12 md:py-24 bg-coolGray-50" x-data="{ toggle: false }">
  <div class="container mx-auto px-4">
    <div class="max-w-2xl mx-auto mb-20 text-center">
      <h1 class="font-heading text-6xl sm:text-8xl lg:text-10xl tracking-tighter mb-12">Premium Membership</h1>
      <div class="flex flex-col xs:flex-row mb-10 items-center justify-center">
        <span :class="{'text-coolGray-500': toggle}" class="text-xl">Billed monthly</span>
        <div class="inline-flex p-0.5 my-4 xs:my-0 xs:mx-4 lg:mx-8 bg-black rounded-full">
            <button :class="{'bg-white': !toggle, 'bg-transparent': toggle }" class="inline-block w-7 h-7 bg-white rounded-full" x-on:click="toggle = !toggle"></button>
            <button :class="{'bg-white': toggle, 'bg-transparent': !toggle }" class="inline-block w-7 h-7 rounded-full" x-on:click="toggle = !toggle"></button>
        </div>
        <div class="inline-flex items-center">
            <span :class="{'text-coolGray-500': !toggle}" class="inline-block mr-3 text-xl text-coolGray-500">Billed yearly</span>
            <span class="inline-block py-1.5 px-3 text-xs border-1.5 border-black rounded-full">20% SAVE</span>
        </div>
      </div>
    </div>
    <div class="max-w-lg lg:max-w-3xl xl:max-w-5xl mx-auto border rounded-4xl overflow-hidden">
      <div class="flex flex-wrap">
        <div class="w-full lg:w-1/2">
          <div class="h-full pt-10 pb-24 px-8">
            <div class="max-w-sm mx-auto text-center">
              <span class="block mb-2 text-xl font-medium">Starter plan</span>
              <h3 class="text-7xl tracking-tighter mb-4">Free</h3>
              <span class="block mb-4 text-sm text-coolGray-500">Switch to annual plan to save 15%</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

Tailwind Component #56

Tailwind CSS

asitrastudio

<div class="fixed bottom-0 right-0 w-full bg-black rounded-t-3xl z-50" x-data="{ open: true }" x-show="open">
  <div class="relative pt-8 pb-9 px-8">
    <button class="absolute top-0 right-0 mt-4 mr-6 p-0 text-xl" x-on:click="open = false">
      <svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M7.5 6.45616L7.42929 6.38545L1.96352 0.919676C1.96351 0.919673 1.96351 0.919669 1.96351 0.919666C1.75876 0.714984 1.4811 0.6 1.19159 0.6C0.902079 0.6 0.624425 0.71498 0.419676 0.919655C0.419669 0.919662 0.419662 0.919669 0.419655 0.919676M7.5 6.45616L0.419655 0.919676M7.5 6.45616L7.57071 6.38545M7.5 6.45616L7.57071 6.38545M0.419655 0.919676C0.21498 1.12442 0.1 1.40208 0.1 1.69159C0.1 1.9811 0.214984 2.25876 0.419666 2.46351M0.419655 0.919676L0.419666 2.46351M0.419666 2.46351C0.419669 2.46351 0.419673 2.46351 0.419676 2.46352M0.419666 2.46351L0.419676 2.46352M0.419676 2.46352L5.88545 7.92929M0.419676 2.46352L5.88545 7.92929M7.57071 6.38545L13.0365 0.919676C13.0365 0.919673 13.0365 0.919669 13.0365 0.919666C13.2412 0.714984 13.5189 0.6 13.8084 0.6C14.0979 0.6 14.3756 0.71498 14.5803 0.919655C14.785 1.12441 14.9 1.40207 14.9 1.69159C14.9 1.9811 14.785 2.25876 14.5803 2.46351C14.5803 2.46351 14.5803 2.46351 14.5803 2.46352L9.11455 7.92929L9.04384 8L9.11455 8.07071L14.5803 13.5365C14.5803 13.5365 14.5803 13.5365 14.5803 13.5365M7.57071 6.38545L14.5803 13.5365M5.95616 8L5.88545 8.07071L0.419676 13.5365C0.419673 13.5365 0.419669 13.5365 0.419666 13.5365C0.214984 13.7412 0.1 14.0189 0.1 14.3084C0.1 14.5979 0.21498 14.8756 0.419655 15.0803C0.624405 15.285 0.902069 15.4 1.19159 15.4C1.4811 15.4 1.75876 15.285 1.96351 15.0803C1.96351 15.0803 1.96351 15.0803 1.96352 15.0803L7.42929 9.61455L7.5 9.54384L7.57071 9.61455L13.0365 15.0803C13.0365 15.0803 13.0365 15.0803 13.0365 15.0803C13.2412 15.285 13.5189 15.4 13.8084 15.4C14.0979 15.4 14.3756 15.285 14.5803 15.0803C14.5803 15.0803 14.5803 15.0803 14.5803 15.0803M5.95616 8L14.5803 15.0803M5.95616 8L5.88545 7.92929M5.95616 8L5.88545 7.92929M14.5803 15.0803C14.785 14.8756 14.9 14.5979 14.9 14.3084C14.9 14.0189 14.785 13.7412 14.5803 13.5365M14.5803 15.0803L14.5803 13.5365" fill="#222222" stroke="white" stroke-width="1"></path>
      </svg>
    </button>
    <div class="container mx-auto px-4">
      <div class="max-w-md mx-auto md:max-w-none">
        <div class="flex flex-wrap -mx-4 items-center lg:items-end">
          <div class="w-full md:w-8/12 px-4 mb-8 lg:mb-0">
            <div class="md:flex">
              <div class="mb-4 md:mb-0 mr-8">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.082 12.8333C12.0485 12.8333 12.832 12.0498 12.832 11.0833C12.832 10.1168 12.0485 9.33331 11.082 9.33331C10.1155 9.33331 9.33203 10.1168 9.33203 11.0833C9.33203 12.0498 10.1155 12.8333 11.082 12.8333Z" fill="white"></path>
                  <path d="M21.582 3.5C22.5485 3.5 23.332 2.7165 23.332 1.75C23.332 0.783502 22.5485 0 21.582 0C20.6155 0 19.832 0.783502 19.832 1.75C19.832 2.7165 20.6155 3.5 21.582 3.5Z" fill="white"></path>
                  <path d="M25.082 9.33331C26.0485 9.33331 26.832 8.54981 26.832 7.58331C26.832 6.61681 26.0485 5.83331 25.082 5.83331C24.1155 5.83331 23.332 6.61681 23.332 7.58331C23.332 8.54981 24.1155 9.33331 25.082 9.33331Z" fill="white"></path>
                  <path d="M11.082 18.6667C12.0485 18.6667 12.832 17.8832 12.832 16.9167C12.832 15.9502 12.0485 15.1667 11.082 15.1667C10.1155 15.1667 9.33203 15.9502 9.33203 16.9167C9.33203 17.8832 10.1155 18.6667 11.082 18.6667Z" fill="white"></path>
                  <path d="M16.918 18.6667C17.8845 18.6667 18.668 17.8832 18.668 16.9167C18.668 15.9502 17.8845 15.1667 16.918 15.1667C15.9515 15.1667 15.168 15.9502 15.168 16.9167C15.168 17.8832 15.9515 18.6667 16.918 18.6667Z" fill="white"></path>
                  <path d="M27.9335 12.663C27.9076 12.3933 27.7887 12.141 27.5971 11.9494C27.4055 11.7578 27.1532 11.6389 26.8835 11.613C24.1881 11.3533 21.667 10.1641 19.7523 8.24923C17.8377 6.33436 16.6487 3.8131 16.3893 1.11767C16.3635 0.84795 16.2445 0.595643 16.053 0.40405C15.8614 0.212457 15.6091 0.0935253 15.3393 0.0676667C14.8972 0.0245 14.4515 0 14 0C11.2311 0 8.52431 0.821086 6.22202 2.35943C3.91973 3.89777 2.12532 6.08427 1.06569 8.64243C0.006066 11.2006 -0.271181 14.0155 0.269012 16.7313C0.809205 19.447 2.14258 21.9416 4.10051 23.8995C6.05845 25.8574 8.55301 27.1908 11.2687 27.731C13.9845 28.2712 16.7994 27.9939 19.3576 26.9343C21.9157 25.8747 24.1022 24.0803 25.6406 21.778C27.1789 19.4757 28 16.7689 28 14C28 13.5485 27.9755 13.1028 27.9335 12.663ZM14 25.6667C10.9058 25.6667 7.93835 24.4375 5.75043 22.2496C3.5625 20.0617 2.33334 17.0942 2.33334 14C2.33334 10.9058 3.5625 7.93835 5.75043 5.75042C7.93835 3.5625 10.9058 2.33333 14 2.33333H14.1983C14.6841 5.19838 16.049 7.84141 18.1038 9.89622C20.1586 11.951 22.8016 13.3159 25.6667 13.8017C25.6667 13.8682 25.6667 13.9335 25.6667 14C25.6633 17.0932 24.433 20.0586 22.2458 22.2458C20.0586 24.433 17.0932 25.6633 14 25.6667Z" fill="white"></path>
                </svg>
              </div>
              <div class="max-w-md lg:max-w-lg xl:max-w-none">
                <h4 class="text-2xl text-white tracking-tight mb-4">Cookie Consent</h4>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #57

Tailwind CSS

asitrastudio

<section class="relative bg-coolGray-50">
  <div class="py-6 border-t border-coolGray-200">
    <div class="container mx-auto px-4">
      <div class="flex items-center">
        <a class="inline-block text-black" href="#">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.51699 2.36667L3.02533 5.86667C2.27533 6.45 1.66699 7.69167 1.66699 8.63334V14.8083C1.66699 16.7417 3.24199 18.325 5.17533 18.325H14.8253C16.7587 18.325 18.3337 16.7417 18.3337 14.8167V8.75C18.3337 7.74167 17.6587 6.45 16.8337 5.875L11.6837 2.26667C10.517 1.45 8.64199 1.49167 7.51699 2.36667Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M10 14.9917V12.4917" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
        <span class="inline-block mx-4">
          <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.83341 4.23333L2.00841 0.408327C1.85228 0.253118 1.64107 0.166 1.42091 0.166C1.20076 0.166 0.989548 0.253118 0.833413 0.408327C0.755306 0.485797 0.693311 0.577964 0.651003 0.679513C0.608696 0.781063 0.586914 0.889984 0.586914 0.999994C0.586914 1.11 0.608696 1.21893 0.651003 1.32047C0.693311 1.42202 0.755306 1.51419 0.833413 1.59166L4.66675 5.40833C4.74485 5.4858 4.80685 5.57796 4.84916 5.67951C4.89146 5.78106 4.91324 5.88998 4.91324 5.99999C4.91324 6.11 4.89146 6.21893 4.84916 6.32048C4.80685 6.42202 4.74485 6.51419 4.66675 6.59166L0.833413 10.4083C0.676493 10.5641 0.587897 10.7759 0.587116 10.997C0.586335 11.2182 0.673432 11.4306 0.829247 11.5875C0.985061 11.7444 1.19683 11.833 1.41797 11.8338C1.6391 11.8346 1.85149 11.7475 2.00841 11.5917L5.83341 7.76666C6.30158 7.29791 6.56455 6.6625 6.56455 5.99999C6.56455 5.33749 6.30158 4.70208 5.83341 4.23333Z" fill="black"></path>
          </svg>
        </span>
        <a class="inline-block text-black" href="#">Services</a>
        <span class="inline-block mx-4">
          <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.83341 4.23333L2.00841 0.408327C1.85228 0.253118 1.64107 0.166 1.42091 0.166C1.20076 0.166 0.989548 0.253118 0.833413 0.408327C0.755306 0.485797 0.693311 0.577964 0.651003 0.679513C0.608696 0.781063 0.586914 0.889984 0.586914 0.999994C0.586914 1.11 0.608696 1.21893 0.651003 1.32047C0.693311 1.42202 0.755306 1.51419 0.833413 1.59166L4.66675 5.40833C4.74485 5.4858 4.80685 5.57796 4.84916 5.67951C4.89146 5.78106 4.91324 5.88998 4.91324 5.99999C4.91324 6.11 4.89146 6.21893 4.84916 6.32048C4.80685 6.42202 4.74485 6.51419 4.66675 6.59166L0.833413 10.4083C0.676493 10.5641 0.587897 10.7759 0.587116 10.997C0.586335 11.2182 0.673432 11.4306 0.829247 11.5875C0.985061 11.7444 1.19683 11.833 1.41797 11.8338C1.6391 11.8346 1.85149 11.7475 2.00841 11.5917L5.83341 7.76666C6.30158 7.29791 6.56455 6.6625 6.56455 5.99999C6.56455 5.33749 6.30158 4.70208 5.83341 4.23333Z" fill="black"></path>
          </svg>
        </span>
        <a class="inline-block text-black" href="#">Lorem Ipsum</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

Tailwind Component #58

Tailwind CSS

asitrastudio

<section class="relative py-36 bg-black overflow-hidden">
  <img class="absolute top-0 left-0 w-full h-full object-cover" src="asitrastudio-assets/cta/bg-cta-room.png" alt="">
  <div class="relative container mx-auto px-4">
    <div class="lg:max-w-3xl mx-auto text-center">
      <h1 class="font-heading text-5xl sm:text-8xl xl:text-10xl text-white tracking-tighter mb-14">
        <span>Share your travels with</span>
        <span></span>
        <span class="inline-block border-b-4 border-white">friends &amp; family</span>
      </h1>
      <a class="group inline-flex mb-3 sm:mb-0 sm:mr-4 py-5 px-8 text-black hover:text-white leading-none items-center justify-center bg-white hover:bg-black rounded-full transition duration-150" href="#">
        <span class="mr-2.5">Get consulation</span>
        <span class="group-hover:rotate-45 transform transition duration-75">
          <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
      </a>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #59

Tailwind CSS

asitrastudio

<section class="relative bg-black overflow-hidden">
  <div class="relative container mx-auto px-4">
    <img class="hidden md:block absolute bottom-0 right-0 -mr-34 lg:-mr-40 xl:-mr-0 w-10/12 lg:w-auto" src="asitrastudio-assets/download/phone-dark-right.png" alt="">
    <div class="relative">
      <div class="max-w-sm lg:max-w-md mx-auto md:mx-0 pt-12 md:pt-20 pb-20 pt-md-24">
        <span class="inline-block mb-4 py-2 px-3 text-sm text-white leading-none border-1.5 border-white group-hover:bg-black rounded-full transition duration-200">Full Time</span>
        <h2 class="font-heading text-5xl sm:text-6xl lg:text-7xl tracking-tight text-white mb-12">Get our mobile app to make the process faster</h2>
        <div class="flex max-w-sm">
          <a class="inline-block mr-6" href="#">
            <img src="asitrastudio-assets/download/app-store.svg" alt="">
          </a>
          <a class="inline-block" href="#">
            <img src="asitrastudio-assets/download/google.svg" alt="">
          </a>
        </div>
        <div class="sm:flex max-w-sm items-center mt-20">
          <img class="mb-6 sm:mb-0 sm:mr-8" src="asitrastudio-assets/download/qr-code.svg" alt="">
          <span class="block text-white">Scan the QR code or go to example.com/qr</span>
        </div>
      </div>
      <img class="md:hidden" src="asitrastudio-assets/download/phone-dark-right.png" alt="">
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #60

Tailwind CSS

asitrastudio

<div class="fixed bottom-0 left-0 w-full pt-8 pb-10 z-50">
  <div class="flex px-6 justify-center">
    <div class="inline-flex py-4 pl-5 pr-6 items-center bg-red-100 border border-red-500 rounded-3xl">
      <span class="mr-4">
        <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M11.5013 1.91663C6.2169 1.91663 1.91797 6.21556 1.91797 11.5C1.91797 16.7844 6.2169 21.0833 11.5013 21.0833C16.7857 21.0833 21.0846 16.7844 21.0846 11.5C21.0846 6.21556 16.7857 1.91663 11.5013 1.91663ZM12.1817 16.972C11.9997 17.1442 11.7502 17.25 11.5013 17.25C11.2519 17.25 11.003 17.1442 10.8209 16.972C10.6483 16.79 10.543 16.5406 10.543 16.2916C10.543 16.0422 10.6483 15.7933 10.8209 15.6112C11.185 15.2566 11.8172 15.2566 12.1817 15.6112C12.3539 15.7933 12.4596 16.0422 12.4596 16.2916C12.4596 16.5504 12.3539 16.79 12.1817 16.972ZM12.4596 12.4583C12.4596 12.9875 12.0305 13.4166 11.5013 13.4166C10.9721 13.4166 10.543 12.9875 10.543 12.4583V6.70829C10.543 6.17906 10.9721 5.74996 11.5013 5.74996C12.0305 5.74996 12.4596 6.17906 12.4596 6.70829V12.4583Z" fill="#FF0000"></path>
        </svg>
      </span>
      <p class="text-red-900">Something went wrong while fetching your license`s data. Please try again contact us.</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

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

Framework

UI Library

Components

Tailwind Component #41

Get the code for 13,400+ components

Yellow Warning Notification Banner: Email Confirmation Required

Tailwind Component #42

Get the code for 13,400+ components

About Us Section with Company Description and Statistics

Tailwind Component #43

Get the code for 13,400+ components

Meet the Team Staff Listing with Circular Avatars

Tailwind Component #44

Get the code for 13,400+ components

Contact Section with Contact Form, Phone and Email Cards, and Map

Tailwind Component #45

Get the code for 13,400+ components

Cookie Consent Banner with Accept and Decline Buttons

Tailwind Component #46

Get the code for 13,400+ components

Breadcrumb Navigation Bar with Homepage, Services, and Lorem Ipsum

Tailwind Component #47

Get the code for 13,400+ components

Tailwind Component #48

Get the code for 13,400+ components

Services Section with Three Outlined Cards

Tailwind Component #49

Get the code for 13,400+ components

Get Started Quickly Alternating Feature Rows with Dashboard Screenshots

Tailwind Component #50

Get the code for 13,400+ components

Minimal Top Navigation Bar with Centered Logo and CTA Button

Tailwind Component #51

Get the code for 13,400+ components

Tailwind Component #52

Get the code for 13,400+ components

Tailwind Component #53

Get the code for 13,400+ components

Tailwind Component #54

Get the code for 13,400+ components

Tailwind Component #55

Get the code for 13,400+ components

Tailwind Component #56

Get the code for 13,400+ components

Tailwind Component #57

Get the code for 13,400+ components

Tailwind Component #58

Get the code for 13,400+ components

Tailwind Component #59

Get the code for 13,400+ components

Tailwind Component #60

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support