Tailwind Components in Pstls library

Framework

UI Library

Components

Tailwind Component #41

Tailwind CSS

Pstls.

<section class="relative" x-data="{ category: '', slideWidth: 0, activeSlide: 0, slideCount: 3 }" x-init="category = $refs.category1.textContent">
  <div class="py-24 bg-red-100 bg-no-repeat bg-cover bg-center" style="background-image: url('pstls-assets/images/portfolio/banner-colors.png');" >
    <div class="container px-4 mx-auto"><span class="text-indigo-400 uppercase" >Our works</span>
      <h1 class="text-5xl lg:text-6xl font-heading mb-16 mt-2" >Discover our recent projects</h1>
      <ul class="relative z-10 md:flex md:flex-wrap items-center">
        <li class="flex items-center mb-6 lg:mb-0 md:mr-6 xl:mr-10">
            <a x-ref="category1" x-on:click.prevent="category = $refs.category1.textContent" class="text-2xl md:text-3xl text-indigo-200 font-heading" :class="{ 'text-indigo-200': category == $refs.category1.textContent, 'text-black hover:text-gray-800': category != $refs.category1.textContent }" href="#" >All</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs font-bold bg-indigo-200 text-white rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category1.textContent, 'bg-indigo-100': category != $refs.category1.textContent }" >41</span>
          </li>
          <li class="flex items-center mb-6 lg:mb-0 md:mr-6 xl:mr-10">
            <a x-ref="category2" x-on:click.prevent="category = $refs.category2.textContent" class="text-2xl md:text-3xl text-black hover:text-gray-800 font-heading" :class="{ 'text-indigo-200': category == $refs.category2.textContent, 'text-black hover:text-gray-800': category != $refs.category2.textContent }" href="#" >Art Direction</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs bg-indigo-100 rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category2.textContent, 'bg-indigo-100': category != $refs.category2.textContent }" >6</span>
          </li>
          <li class="flex items-center mb-6 lg:mb-0 md:mr-6 xl:mr-10">
            <a x-ref="category3" x-on:click.prevent="category = $refs.category3.textContent" class="text-2xl md:text-3xl text-black hover:text-gray-800 font-heading" :class="{ 'text-indigo-200': category == $refs.category3.textContent, 'text-black hover:text-gray-800': category != $refs.category3.textContent }" href="#" >Branding</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs font-bold bg-indigo-100 rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category3.textContent, 'bg-indigo-100': category != $refs.category3.textContent }" >4</span>
          </li>
          <li class="flex items-center mb-6 lg:mb-0 md:mr-6 xl:mr-10">
            <a x-ref="category4" x-on:click.prevent="category = $refs.category4.textContent" class="text-2xl md:text-3xl text-black hover:text-gray-800 font-heading" :class="{ 'text-indigo-200': category == $refs.category4.textContent, 'text-black hover:text-gray-800': category != $refs.category4.textContent }" href="#" >Video</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs font-bold bg-indigo-100 rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category4.textContent, 'bg-indigo-100': category != $refs.category4.textContent }" >12</span>
          </li>
          <li class="flex items-center mb-6 lg:mb-0 md:mr-6 xl:mr-10">
            <a x-ref="category5" x-on:click.prevent="category = $refs.category5.textContent" class="text-2xl md:text-3xl text-black hover:text-gray-800 font-heading" :class="{ 'text-indigo-200': category == $refs.category5.textContent, 'text-black hover:text-gray-800': category != $refs.category5.textContent }" href="#" >Event</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs font-bold bg-indigo-100 rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category5.textContent, 'bg-indigo-100': category != $refs.category5.textContent }" >3</span>
          </li>
          <li class="flex items-center mb-6 lg:mb-0">
            <a x-ref="category6" x-on:click.prevent="category = $refs.category6.textContent" class="text-2xl md:text-3xl text-black hover:text-gray-800 font-heading" :class="{ 'text-indigo-200': category == $refs.category6.textContent, 'text-black hover:text-gray-800': category != $refs.category6.textContent }" href="#" >Development</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs font-bold bg-indigo-100 rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category6.textContent, 'bg-indigo-100': category != $refs.category6.textContent }" >16</span>
          </li>
      </ul>

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

Portfolio Project Showcase with Category Filters and Carousel

A light-themed portfolio section with an eyebrow label, serif heading, and horizontal category filter tabs with count badges. Below is a large featured project image with previous/next carousel controls, a serif project title, and a short gray description, flanked by partially visible decorative image tiles.

Tailwind Component #42

Tailwind CSS

Pstls.

<section class="relative py-24 overflow-hidden">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-md mx-auto text-center relative z-10">
      <h3 class="text-4xl lg:text-5xl font-heading mb-12 text-indigo-200" >Error 404</h3>
      <p class="mb-10" >Sorry, we can't find that page or something has gone wrong...</p><a class="inline-block px-8 py-3 text-white font-bold bg-black hover:bg-gray-900" href="#" >Go back to Homapage</a>
    </div><img class="absolute top-0 left-0 w-full" src="pstls-assets/images/http-codes/404.png" alt="" ><img class="absolute top-0 left-0 w-full" src="pstls-assets/images/http-codes/http-codes-shadow.png" alt="" style="z-index: 2;">
  </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

404 Error Page with Centered Message and Homepage Button

A centered error state displaying a large serif "Error 404" heading, a short apology message, and a black button linking back to the homepage. The soft pastel gradient background and minimal content stack give it a simple, focused layout.

Tailwind Component #43

Tailwind CSS

Pstls.

<section class="py-24 md:py-0 relative"><img class="absolute top-0 right-0 hidden lg:block w-1/2 h-full object-contain" src="pstls-assets/images/applications/group-phones.png" alt="" >
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 md:mb-0">
        <div class="max-w-md mx-auto md:mx-0 md:py-32">
          <h2 class="text-5xl md:text-6xl font-heading mb-6" >Build and launch without problems</h2>
          <p class="mb-6 leading-8" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
          
          <div class="flex"><a class="inline-block mr-4" href="#"><img src="pstls-assets/images/applications/appstore.svg" alt="" ></a><a class="inline-block" href="#"><img src="pstls-assets/images/applications/googleplay.svg" alt="" ></a></div>
        </div>
      </div>
      <div class="w-full lg:hidden">
        <img src="pstls-assets/images/applications/group-phones.png" alt="" >
      </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

Hero Section with App Store Download Badges and Phone Mockups

A light-background marketing hero with a large serif headline, short body copy, and App Store and Google Play badges on the left, and a cluster of staggered phone mockups showing app screens on the right. It promotes a mobile app with a split-screen layout.

Tailwind Component #44

Tailwind CSS

Pstls.

<section x-data="{ mobileNavOpen: false }">
  <nav class="py-10"   data-config-="data-config-">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between relative"><a class="inline-block" href="#"  ><img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="116"></a>
        
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#000"></path>
          </svg>
        </button>
        
        <div class="hidden lg:block ml-14">
          <ul class="inline-flex">
            <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" aria-current="page" href="#" >Home</a></li>
            <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" href="#" >Products</a></li>
            <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" href="#" >Resources</a></li>
            <li><a class="inline-block font-bold hover:text-gray-900" href="#" >Pricing</a></li>
          </ul>
        </div>
        <div class="hidden lg:block ml-auto">
          <div class="flex justify-between p-4 bg-gray-100">
            <input class="bg-transparent outline-none" type="text" placeholder="Search" aria-label="Search" aria-describedby="search-addon">
            <button class="inline-block" type="button"><img src="pstls-assets/images/navigations/search.svg" alt="" ></button>
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Pstls. Top Navigation Bar with Search

A horizontal site header with a purple-accented Pstls. logo on the left, bold text links for Home, Products, Resources, and Pricing, and a search input with magnifier icon on the right. The light background and single-row arrangement make it a standard website navigation bar.

Tailwind Component #45

Tailwind CSS

Pstls.

<section class="py-24">
  <div class="container px-4 mx-auto">
    <p class="leading-8 text-gray-500 text-center mb-12" >Trusted by brands all over the world</p>
    
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 text-center mb-10 lg:mb-0">
        <div class="p-4 h-40 flex items-center justify-center bg-indigo-100"><img src="pstls-assets/logos/coca-cola-b-xl.svg" alt="" ></div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 text-center mb-10 lg:mb-0">
        <div class="p-4 h-40 flex items-center justify-center bg-pink-100"><img src="pstls-assets/logos/apple-b-xl.svg" alt="" ></div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 text-center mb-10 md:mb-0">
        <div class="p-4 h-40 flex items-center justify-center bg-orange-100"><img src="pstls-assets/logos/champion-b-xl.svg" alt="" ></div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 text-center">
        <div class="p-4 h-40 flex items-center justify-center bg-lime-100"><img src="pstls-assets/logos/sony-b-xl.svg" alt="" ></div>
      </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

Brand Logo Trust Strip with Four Pastel Tiles

A light-background section with a small gray caption reading "Trusted by brands all over the world" above a horizontal row of four equal-sized pastel tiles, each showing a black brand logo (Coca-Cola, Apple, Champion, Sony). The section is used to build trust through customer logos.

Tailwind Component #46

Tailwind CSS

Pstls.

<section class="py-24 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto relative">
    <div class="p-10 md:p-20 lg:p-32 absolute top-0 left-0 xl:-mt-32 xl:-ml-32 bg-red-100"></div>
    <div class="p-10 md:p-20 lg:p-32 absolute top-0 right-0 xl:-mt-32 xl:-mr-32 bg-indigo-100"></div>
    <div class="relative">
        <div class="hidden xl:flex absolute top-20 mt-2 -ml-6">
          <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="relative z-10 flex items-center justify-center w-14 h-14 bg-black hover:bg-gray-900">
          <img src="pstls-assets/icons/testimonials-arrow-left.svg" alt=""></button>
        </div>
        <div class="hidden xl:flex absolute top-20 mt-2 right-0 -mr-6">
          <button x-on:click="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="relative z-10 flex items-center justify-center w-14 h-14 bg-black hover:bg-gray-900">
          <img src="pstls-assets/icons/testimonials-arrow-right.svg" alt=""></button>
        </div>
        <div class="overflow-hidden">
          <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-3">
            <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
              <div class="flex flex-wrap -mx-4">
                
                <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-14 xl:mb-0">
                  <div class="mx-auto max-w-xs px-7 xl:px-0 relative">
                    <img class="block mx-auto h-64 object-cover" src="pstls-assets/images/teams/team-1-photo.jpg" 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

Testimonial Carousel with Portrait Cards and Navigation Arrows

A horizontal carousel of portrait photo cards with left and right arrow buttons, where the center card expands to show a name, job title, social icons, and a quotation on a black panel. Other cards show only photos, suggesting a testimonial slider.

Tailwind Component #47

Tailwind CSS

Pstls.

<section class="py-24" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-20 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-6 lg:mb-0">
        <h2 class="text-5xl md:text-6xl font-heading" >Blog</h2>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <p class="max-w-lg leading-8" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
      </div>
    </div>
    <div class="max-w-5xl mx-auto flex flex-wrap mb-16">
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-6 md:px-10 mb-16"><a class="block" href="#">
          <div class="max-w-xs mx-auto">
            <div class="relative mb-12 h-64">
              <div class="absolute left-0 bottom-0 -ml-6 -mb-6 w-full bg-indigo-100 h-64"></div><img class="relative w-full h-full" src="pstls-assets/images/blog/blog-photo1.png" alt="" >
            </div>
            <h2 class="text-4xl mb-4 font-heading" >Lorem ipsum random blog article</h2>
            <div class="mb-4 text-indigo-200"><span >6 min read</span><span class="mx-2">•</span><span >10 July 2022</span></div>
            <p class="leading-8" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
          </div></a></div>
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-6 md:px-10 mb-16"><a class="block" href="#">
          <div class="max-w-xs mx-auto">

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

Blog Article Card Grid with Serif Headings

A light-background blog section with a serif Blog heading and intro text, showing six article cards in a three-column grid. Each card has a dark image placeholder with offset pastel backdrop, a serif title, read time and date metadata, and body excerpt, followed by a centered black View more articles button.

Tailwind Component #48

Tailwind CSS

Pstls.

<section class="pb-24 pt-48 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex justify-center">
      <div class="bg-black pb-24 pt-16 mr-auto relative">
        <div class="xl:absolute right-0 -mt-40 xl:-mr-52"><img class="block mx-auto max-w-sm" src="pstls-assets/images/features/features-women.png" alt="" ></div>
        <div class="md:max-w-lg hidden xl:block px-64 py-80 bg-indigo-100 xl:absolute top-0 right-0 xl:-ml-52 -ml-48" style="z-index: -1;"></div>
        <div class="max-w-3xl xl:max-w-5xl mx-auto xl:mr-auto xl:-mr-20 mt-12 xl:mt-0 px-10 xl:px-32">
          <div class="flex">
            <div class="w-full md:w-8/12 xl:w-10/12">
              <h2 class="max-w-xl text-4xl text-white font-heading" >Lorem ipsum dolor sit amet conscetutar domor at elis</h2>
            </div>
          </div>
          <div class="flex flex-wrap -mx-4 mt-12 -mb-10">
            
            <div class="w-full md:w-1/2 xl:w-5/12 px-4 xl:px-10 mb-10"><img src="pstls-assets/icons/document-clean.svg" alt="" >
              <h5 class="mt-8 mb-6 text-xl text-white font-heading" >Layer styles</h5>
              <p class="leading-8 text-gray-400" >Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
            
            <div class="w-full md:w-1/2 xl:w-5/12 px-4 xl:px-10 mb-10"><img src="pstls-assets/icons/check-circle.svg" alt="" >
              <h5 class="mt-8 mb-6 text-xl text-white font-heading" >No errors</h5>
              <p class="leading-8 text-gray-400" >Take care to develop resources continually and integrity them with previous projects.</p>
            </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Feature Section with Serif Heading and Four Icon Features

A dark feature section with a large serif heading and a two-by-two grid of icon-led features, each with a bold title and muted body text. A photograph of people working at a table overlaps the top-right corner of the black panel.

Tailwind Component #49

Tailwind CSS

Pstls.

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="px-4 pb-2 overflow-x-auto">
        <table class="table-auto w-full text-left min-w-max border">
          <thead class="border-b">
            <tr>
              <th class="pl-6 py-5" scope="col">
                <button class="flex items-center"><small >Surname</small>
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.3327 6.00002L7.99935 2.66669L4.66602 6.00002M4.66602 10L7.99935 13.3334L11.3327 10" stroke="#C5C5C5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </button>
              </th>
              <th class="px-3 py-5" scope="col">
                <button class="flex items-center"><small >Name</small>
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.3327 6.00002L7.99935 2.66669L4.66602 6.00002M4.66602 10L7.99935 13.3334L11.3327 10" stroke="#C5C5C5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </button>
              </th>
              <th class="px-3 py-5" scope="col">
                <button class="flex items-center"><small >E-mail</small>
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Sortable Data Table with Surname, Name, Email, Package, and Purchase Date

A bordered table with sortable column headers (Surname, Name, E-mail, Package, Purchased) and five identical rows of customer records. The layout is a simple horizontal header row followed by stacked data rows on a white background.

Tailwind Component #50

Tailwind CSS

Pstls.

<section class="py-24">
  <div class="container px-4 mx-auto"><img class="w-full mb-8" src="https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=870&amp;q=80" alt="" >
    <div class="max-w-3xl mx-auto text-center"><span class="text-indigo-300" >Published 02 September 2022</span>
      <h2 class="text-4xl md:text-5xl font-heading mt-4 mb-6" >Lorem ipsum dolor sit amet consectutar domor at elis</h2>
    </div>
    <div class="max-w-xl mx-auto">
      <p class="leading-8 mb-8 pb-8 border-b" >These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <h2 class="text-4xl font-heading mb-6" >Lorem ipsum</h2>
      <p class="leading-8 mb-6" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p><img class="block w-full mb-4" src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=870&amp;q=80" alt="" >
      <p class="text-sm mb-6"><span >Brown wooden dock by Mark Harpur via </span><a class="text-indigo-500 hover:text-indigo-600 underline hover:no-underline" href="#" >Unsplash</a></p>
      <p class="leading-8 mb-6" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <p class="leading-8 mb-6" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor commodo arcu id ullamcorper. Aliquam vestibulum lobortis venenatis. Aenean in pharetra risus, id iaculis leo. Proin id risus sit amet mauris hendrerit tincidunt. Vestibulum pulvinar nec leo nec sagittis. Duis vestibulum sit amet odio sodales consequat. Nam eget elit tempus, cursus lorem vel, sollicitudin massa. Sed varius condimentum massa, et volutpat ante eleifend a. Praesent purus justo, finibus eu suscipit in, vulputate quis est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin euismod tellus quam, eget interdum diam consectetur eget. Phasellus felis quam, iaculis at malesuada nec, varius nec massa. Integer rhoncus sapien faucibus turpis bibendum, quis maximus magna vehicula. Quisque pharetra, tortor sit amet vestibulum tincidunt, tortor lectus pretium ipsum, a elementum risus libero id diam. Morbi ut sem elementum, blandit augue eu, vehicula nunc. Ut et pellentesque mauris.</p>
      
      <ul class="mb-6 list-decimal list-inside">
        <li class="leading-8 mb-2" >Pellentesque in elit nec velit suscipit tincidunt sit amet sed augue. Proin augue justo, imperdiet nec ultrices non, dapibus sit amet risus. Nunc pellentesque nisl at neque pulvinar ornare.</li>
        <li class="leading-8 mb-2" >Nullam euismod, turpis a fermentum malesuada, lectus ante consectetur sem, ac eleifend ipsum diam vitae nisi. Pellentesque feugiat, nibh ut hendrerit porta, erat lectus aliquet libero, vitae vulputate leo neque id sapien.</li>
        <li class="leading-8 mb-6" >Praesent a consequat velit, a tincidunt est. Proin eu facilisis lacus. Fusce orci elit, pharetra at orci at, sagittis sollicitudin ex. Duis vitae nunc mollis, ultrices risus vel, consequat erat. Nam vel diam risus. Ut sed sagittis nibh, sed bibendum eros.</li>
      </ul>
      
      <div class="flex mb-6 bg-indigo-100 relative">
        <div class="absolute top-0 left-0 px-1 h-full bg-indigo-200"></div>
        <div class="pl-14 py-10 pr-10">
          <h2 class="text-4xl font-heading"  >“On the other hand, perfection can also haunt some of us to the point of inaction.”</h2>
        </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

Long-form Blog Article with Hero Image and Pull Quote

A single-column editorial blog post layout featuring a full-width hero photo, a centered publication date, serif headings, body text with an embedded image and caption, a numbered list, and a lavender-accented pull quote with attribution. The layout is minimal and spacious, focused on readable article content.

Tailwind Component #51

Tailwind CSS

Pstls.

<section class="py-24 relative overflow-hidden">
  <div class="container px-4 mx-auto relative z-10">
    <div class="max-w-md lg:max-w-2xl mx-auto text-center"><span class="text-gray-400 uppercase" >New feature</span>
      <h1 class="text-4xl md:text-5xl lg:text-6xl font-heading mt-2 mb-6"><span >Take </span> <span class="text-indigo-200" >quick action</span> <span >that increases your brand's regular profit.</span></h1>
      <p class="leading-8 mb-10" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div class="flex flex-wrap -mx-2 -mb-2 justify-center items-center">
        <div class="w-full md:w-auto px-2 mb-2"><a class="block w-full md:w-auto py-3 px-8 text-center text-black font-bold bg-indigo-200 hover:bg-indigo-300 transition duration-200" href="#" >Activate Demo</a></div>
        <div class="w-full md:w-auto px-2 mb-2"><a class="block w-full md:w-auto py-3 px-8 text-center bg-transparent text-black font-bold border border-indigo-200 hover:bg-indigo-200 transition duration-200" href="#" >Share with friends</a></div>
      </div>
    </div>
  </div>
  <div class="absolute bottom-0 left-0 h-full md:flex md:flex-col md:justify-center">
    <div class="hidden md:block mb-8 h-32 lg:h-64 w-32 lg:w-64 bg-lime-100"></div>
    <div class="hidden md:block mb-8 h-32 lg:h-64 w-32 lg:w-64 bg-orange-100"></div>
    <div class="h-16 sm:h-32 lg:h-64 w-16 sm:w-32 lg:w-64 bg-red-100"></div>
  </div>
  <div class="absolute top-0 right-0 h-full md:flex md:flex-col md:justify-center">
    <div class="mb-8 h-16 sm:h-32 lg:h-64 w-16 sm:w-32 lg:w-64 bg-pink-100"></div>
    <div class="hidden md:block mb-8 h-32 lg:h-64 w-32 lg:w-64 bg-indigo-100"></div>
    <div class="hidden md:block h-32 lg:h-64 w-32 lg:w-64 bg-blue-100"></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

Centered Hero with Serif Heading and Dual CTA Buttons

A centered hero section with a small eyebrow label, a large serif headline with a lavender highlighted phrase, a short supporting paragraph, and two side-by-side buttons for activating a demo and sharing. Pastel decorative color blocks frame the white central content column.

Tailwind Component #52

Tailwind CSS

Pstls.

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 justufy-center">
      
      <div class="w-full md:w-1/2 lg:w-1/5 px-4 mb-12 lg:mb-0">
        <div class="text-center">
          <p class="text-sm text-gray-500 mb-2"  >Subscribers</p>
          <h2 class="text-3xl font-heading" >12 350</h2>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/5 px-4 mb-12 lg:mb-0">
        <div class="text-center">
          <p class="text-sm text-gray-500 mb-2"  >Messages</p>
          <h2 class="text-3xl font-heading" >12 350</h2>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/5 px-4 mb-12 lg:mb-0">
        <div class="text-center">
          <p class="text-sm text-gray-500 mb-2"  >Projects</p>
          <h2 class="text-3xl font-heading" >5 065</h2>
        </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

Five-Column Statistics Row with Serif Numeric Values

A horizontal row of five metric blocks on a white background, each showing a small gray label above a large bold serif number such as Subscribers, Messages, Projects, Files, and Tasks. It presents summary counts in a minimal, spacious layout with no visible charts, controls, or interactive elements.

Tailwind Component #53

Tailwind CSS

Pstls.

<section class="relative"><img class="hidden lg:block absolute top-0 right-0 w-1/2 h-full" src="pstls-assets/images/contacts/shadows-big.png" alt="">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-md mx-auto py-24">
          <h2 class="text-5xl md:text-6xl lg:text-7xl font-heading mb-12" >Form</h2>
          <form action="">
            <input class="block w-full py-2 px-4 mb-6 text-lg border-b border-gray-400 placeholder-gray-300 outline-none" type="text" placeholder="Name">
            <input class="block w-full py-2 px-4 mb-6 text-lg border-b border-gray-400 placeholder-gray-300 outline-none" type="text" placeholder="Surname">
            <input class="block w-full py-2 px-4 mb-6 text-lg border-b border-gray-400 placeholder-gray-300 outline-none" type="text" placeholder="Mail address">
            <textarea class="block w-full py-2 px-4 mb-6 text-lg border-b border-gray-400 placeholder-gray-300 outline-none resize-none" name="" id="" cols="30" rows="10" placeholder="Form message"></textarea>
            <button class="inline-flex items-center mb-6">
              <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 8.96959L9.96279 16.5497C8.97817 17.4783 7.64274 18 6.25028 18C4.85782 18 3.52239 17.4783 2.53777 16.5497C1.55315 15.6211 1 14.3616 1 13.0483C1 11.7351 1.55315 10.4756 2.53777 9.54697L10.575 1.96687C11.2314 1.34779 12.1217 1 13.05 1C13.9783 1 14.8686 1.34779 15.525 1.96687C16.1814 2.58595 16.5502 3.4256 16.5502 4.30111C16.5502 5.17662 16.1814 6.01628 15.525 6.63535L7.47904 14.2154C7.15083 14.525 6.70569 14.6989 6.24154 14.6989C5.77738 14.6989 5.33224 14.525 5.00403 14.2154C4.67583 13.9059 4.49144 13.4861 4.49144 13.0483C4.49144 12.6106 4.67583 12.1907 5.00403 11.8812L12.429 4.88674" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg><span class="ml-3" >Attach File</span>
            </button>
            <button class="block w-full py-3 px-8 text-black font-bold bg-indigo-200 hover:bg-indigo-300 transition duration-200" >Send Now</button>
          </form>
        </div>
      </div>
      
      <div class="w-full lg:w-1/2 px-4 lg:pl-24 relative"><img class="lg:hidden absolute top-0 left-0 w-full h-full" src="pstls-assets/images/contacts/shadows-big.png" alt="">
        <div class="py-24 max-w-md xl:max-w-lg mx-auto relative">
          <h2 class="text-5xl md:text-6xl lg:text-7xl font-heading mb-12" >Contact</h2>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Split-screen contact form with business details

A two-column contact section with a left-side form (Name, Surname, Mail address, message, Attach File, and a Send Now button) and a right-side contact panel listing email, phone, social icons, and office address on a soft pastel gradient background.

Tailwind Component #54

Tailwind CSS

Pstls.

<section style="background-image: url('pstls-assets/images/forms/form-3-shadow.png'); background-repeat: no-repeat; background-size: cover; z-index: -1;" >
  <div class="flex flex-wrap items-center">
    <div class="w-full lg:w-1/2">
      <div class="container px-4 mx-auto">
        <div class="max-w-sm mx-auto text-center py-24"><img class="block mx-auto mb-6" src="pstls-assets/logos/pstls-logo-form.svg" alt="" >
          <h2 class="text-4xl font-heading mb-2" >Log in to your account</h2>
          <p class="leading-8 mb-6" >Please enter your details to proceed.</p>
          
          <form class="text-left" action="">
            <label class="block mb-6"><span class="text-sm" >Email</span>
              <input class="mt-2 w-full py-3 px-4 border border-gray-200 outline-none" type="email" placeholder="Your email address">
            </label>
            <label class="block mb-6"><span class="text-sm" >Password</span>
              <input class="mt-2 w-full py-3 px-4 border border-gray-200 outline-none" type="password" placeholder="Your password">
            </label>
            <label class="flex items-start mb-6">
              <input class="mr-3" type="checkbox" name="terms" value="1"><span class="text-xs"><span >By signing up, you agree to our</span> <a class="text-blue-500 hover:underline" href="#" >Terms, Data Policy, and Cookies Policy.</a></span>
            </label><a class="inline-block mb-4 w-full px-8 py-3 text-center text-white font-bold bg-black hover:bg-gray-900" href="#" >Sign In</a><a class="flex mb-6 items-center justify-center px-6 py-3 w-full text-center text-black font-bold border border-gray-200 hover:border-gray-300" href="#"><img class="mr-3" src="pstls-assets/logos/google-form-xs.svg" alt=""><span >Sign In with Google</span></a>
            
            <p class="text-xs text-center"><span >Don’t have an account?</span> <a class="text-blue-500 hover:underline" href="#" >Sign Up</a></p>
          </form>
        </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

Tailwind Component #55

Tailwind CSS

Pstls.

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 lg:mb-0">
        <div class="relative w-full"><img class="block w-full" src="pstls-assets/images/stats/background1.png" alt="">
          <div class="text-center absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2">
            <p class="text-sm text-indigo-300 font-bold mb-2"  >Subscribers</p>
            <h2 class="text-4xl font-heading" >12 350</h2>
          </div>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 lg:mb-0">
        <div class="relative w-full"><img class="block w-full" src="pstls-assets/images/stats/background4.png" alt="">
          <div class="text-center absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2">
            <p class="text-sm text-pink-300 font-bold mb-2"  >Projects</p>
            <h2 class="text-4xl font-heading" >5 065</h2>
          </div>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 md:mb-0">
        <div class="relative w-full"><img class="block w-full" src="pstls-assets/images/stats/background3.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

Tailwind Component #56

Tailwind CSS

Pstls.

<section>
  <div class="pt-24 pb-16">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4 justify-between">
        
        <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-10 lg:mb-0"><a class="inline-block mb-6" href="#"  ><img src="pstls-assets/logos/pstls-logo.svg" alt="" width="87"></a>
          <p class="leading-8" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        
        <div class="w-full md:w-1/2 lg:w-auto px-4 mb-10 lg:mb-0">
          <h5 class="text-xl font-bold mb-5" >Product</h5>
          <ul>
            <li class="mb-2"><a class="inline-block hover:text-gray-900" href="#" >Hello</a></li>
            <li class="mb-2"><a class="inline-block hover:text-gray-900" href="#" >Story</a></li>
            <li class="mb-2"><a class="inline-block hover:text-gray-900" href="#" >Pricing</a></li>
            <li><a class="inline-block hover:text-gray-900" href="#" >Applications</a></li>
          </ul>
        </div>
        
        <div class="w-full md:w-1/2 lg:w-auto px-4 mb-10 lg:mb-0">
          <h5 class="text-xl font-bold mb-5" >Resources</h5>
          <ul>
            <li class="mb-2"><a class="inline-block hover:text-gray-900" href="#" >New account</a></li>
            <li class="mb-2"><a class="inline-block hover:text-gray-900" href="#" >Log in</a></li>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #57

Tailwind CSS

Pstls.

<section class="py-24 pb-48 md:pb-96 relative">
  <div class="container px-4 mx-auto lg:mb-16">
    <div class="max-w-6xl mx-auto p-12 md:p-24 lg:pb-64 relative" style="background-image: url('pstls-assets/images/applications/background-pstls.png'); background-repeat: no-repeat; background-size: cover; background-position: center;" >
      <div class="max-w-lg mx-auto pb-10 md:pb-20 text-center">
        <h2 class="text-4xl md:text-5xl lg:text-6xl font-heading mb-12" >Build and launch without problems</h2>
        
        <div class="flex justify-center"><a class="inline-block mr-4" href="#"><img src="pstls-assets/images/applications/appstore.svg" alt="" ></a><a class="inline-block" href="#"><img src="pstls-assets/images/applications/googleplay.svg" alt="" ></a></div>
      </div>
      
      <div class="absolute md:-bottom-1/2 left-0 right-0 w-full"><img class="lg:max-w-5xl px-10 mx-auto" src="pstls-assets/images/applications/three-phones.png" alt="" ></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

Tailwind Component #58

Tailwind CSS

Pstls.

<section class="fixed inset-0 py-24" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4 }">
  <div class="container px-4 mx-auto relative z-10">
    <div class="max-w-xl mx-auto text-center bg-white py-12 md:py-16 px-6 md:px-14">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-3">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                    <img class="block mx-auto mb-8" src="pstls-assets/images/modals/modal-preview.jpg" alt="" >
                    <h2 class="text-4xl font-heading mb-3" >Welcome to our project</h2>
                    <p class="max-w-md mx-auto leading-8 mb-6" >We’re glad to have you onboard. Here are some quick tips to get you up and running.</p>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full p-3">
                    <img class="block mx-auto mb-8" src="pstls-assets/images/modals/modal-preview.jpg" alt="" >
                    <h2 class="text-4xl font-heading mb-3" >New Member Orientation</h2>
                    <p class="max-w-md mx-auto leading-8 mb-6" >Welcome to the Team! Here’s Your Quick Start Guide.</p>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full p-3">
                    <img class="block mx-auto mb-8" src="pstls-assets/images/modals/modal-preview.jpg" alt="" >
                    <h2 class="text-4xl font-heading mb-3" >Getting Started: A Guide for Newcomers</h2>
                    <p class="max-w-md mx-auto leading-8 mb-6" >Your Journey Begins Here – Essential Tips for Success.</p>
                </div>
                <div x-ref="slide4" class="flex-shrink-0 w-full p-3">
                    <img class="block mx-auto mb-8" src="pstls-assets/images/modals/modal-preview.jpg" alt="" >
                    <h2 class="text-4xl font-heading mb-3" >Welcome Packet: Your Introduction to Our Project</h2>
                    <p class="max-w-md mx-auto leading-8 mb-6" >Start Strong with These Pro Tips for New Team Members.</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

Tailwind Component #59

Tailwind CSS

Pstls.

<section class="py-24" style="background-image: url('pstls-assets/images/testimonials/testimonial-3-shadow.png'); background-size: cover; background-repeat: no-repeat; background-position: center" >
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto mb-12 text-center">
      <h2 class="text-4xl md:text-5xl font-heading mb-6" >Testimonials</h2>
      <p class="leading-8" >This UI Kit uses attractive colors and modern typography to make you look good, no matter what business you’re in.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-xs mx-auto py-8 px-6 lg:px-10 hover:bg-indigo-100 transition duration-200"><img class="mb-3" src="pstls-assets/images/testimonials/testimonials-3-photo-circle-2.png" alt="" >
          <p class="text-xl font-heading mb-2"  >John Doe</p><span class="text-gray-500" >Front-end developer</span>
          <p class="leading-8 text-gray-500 mt-6" >Many people were hoping that if the Democrats won control of Congress they would reverse the online</p>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-xs mx-auto py-8 px-6 lg:px-10 hover:bg-indigo-100 transition duration-200"><img class="mb-3" src="pstls-assets/images/testimonials/testimonials-3-photo-circle.png" alt="" >
          <p class="text-xl font-heading mb-2"  >Sophie Kovalsky</p><span class="text-gray-500" >UI/UX Designer</span>
          <p class="leading-8 mt-6 mb-6" >Many people were hoping that if the Democrats won control of Congress they would reverse the online</p>
          <div class="flex items-center"><a class="inline-block mr-2" href="#"><img src="pstls-assets/logos/twitter.svg" alt=""></a><a class="inline-block mr-2" href="#"><img src="pstls-assets/logos/google.svg" alt=""></a><a class="inline-block" href="#"><img src="pstls-assets/logos/facebook.svg" alt=""></a></div>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-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

Tailwind Component #60

Tailwind CSS

Pstls.

<section class="py-24 relative" x-data="{ category: '', showContent: false }" x-init="category = $refs.category1.textContent">
  <div class="container px-4 mx-auto relative z-10"><span class="text-indigo-400 uppercase" >Our works</span>
    <h1 class="text-5xl md:text-6xl font-heading mb-16 mt-2" >Discover our recent projects</h1>
    <ul class="md:flex items-center mb-24 xl:mb-32">
      <li class="flex items-center mb-6 md:mb-0 md:mr-6 xl:mr-10">
        <a x-ref="category1" x-on:click.prevent="category = $refs.category1.textContent" class="uppercase text-indigo-300 underline" :class="{ 'text-indigo-300 underline': category == $refs.category1.textContent, 'hover:underline': category != $refs.category1.textContent }" href="#" >All</a>
      </li>
      <li class="flex items-center mb-6 md:mb-0 md:mr-6 xl:mr-10">
        <a x-ref="category2" x-on:click.prevent="category = $refs.category2.textContent" class="uppercase hover:underline" href="#" :class="{ 'text-indigo-300 underline': category == $refs.category2.textContent }" >Art Direction</a>
      </li>
      <li class="flex items-center mb-6 md:mb-0 md:mr-6 xl:mr-10">
        <a x-ref="category3" x-on:click.prevent="category = $refs.category3.textContent" class="uppercase hover:underline" href="#" :class="{ 'text-indigo-300 underline': category == $refs.category3.textContent }" >Branding</a>
      </li>
      <li class="flex items-center mb-6 md:mb-0 md:mr-6 xl:mr-10">
        <a x-ref="category4" x-on:click.prevent="category = $refs.category4.textContent" class="uppercase hover:underline" href="#" :class="{ 'text-indigo-300 underline': category == $refs.category4.textContent }" >Video</a>
      </li>
      <li class="flex items-center mb-6 md:mb-0 md:mr-6 xl:mr-10">
        <a x-ref="category5" x-on:click.prevent="category = $refs.category5.textContent" class="uppercase hover:underline" href="#" :class="{ 'text-indigo-300 underline': category == $refs.category5.textContent }" >Event</a>
      </li>
      <li class="flex items-center">
        <a x-ref="category6" x-on:click.prevent="category = $refs.category6.textContent" class="uppercase hover:underline" href="#" :class="{ 'text-indigo-300 underline': category == $refs.category6.textContent }" >Development</a>
      </li>
    </ul>
    <div class="mb-20">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Components – Pstls Library

Framework

UI Library

Components

Tailwind Component #41

Get the code for 13,400+ components

Portfolio Project Showcase with Category Filters and Carousel

Tailwind Component #42

Get the code for 13,400+ components

404 Error Page with Centered Message and Homepage Button

Tailwind Component #43

Get the code for 13,400+ components

Hero Section with App Store Download Badges and Phone Mockups

Tailwind Component #44

Get the code for 13,400+ components

Pstls. Top Navigation Bar with Search

Tailwind Component #45

Get the code for 13,400+ components

Brand Logo Trust Strip with Four Pastel Tiles

Tailwind Component #46

Get the code for 13,400+ components

Testimonial Carousel with Portrait Cards and Navigation Arrows

Tailwind Component #47

Get the code for 13,400+ components

Blog Article Card Grid with Serif Headings

Tailwind Component #48

Get the code for 13,400+ components

Dark Feature Section with Serif Heading and Four Icon Features

Tailwind Component #49

Get the code for 13,400+ components

Sortable Data Table with Surname, Name, Email, Package, and Purchase Date

Tailwind Component #50

Get the code for 13,400+ components

Long-form Blog Article with Hero Image and Pull Quote

Tailwind Component #51

Get the code for 13,400+ components

Centered Hero with Serif Heading and Dual CTA Buttons

Tailwind Component #52

Get the code for 13,400+ components

Five-Column Statistics Row with Serif Numeric Values

Tailwind Component #53

Get the code for 13,400+ components

Split-screen contact form with business details

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