Snippet

TailwindCSS Modern Feature with Large Image

Maisam Afshar - Frontend Developer

Sayed Murtaza

It is a beautiful Tailwind CSS feature component.

Everything you need

No server? No problem.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis.

App photo
Push to deploy.

Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.

SSL certificates.

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.

Simple queues.

Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.

Advanced security.

Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.

Powerful API.

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.

Database backups.

Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.

<div class="py-24 overflow-hidden bg-white lg:py-32">
  <div class="px-6 mx-auto max-w-7xl lg:px-8">
    <div class="max-w-2xl mx-auto sm:text-center">
      <h4 class="text-base font-semibold leading-7 text-blue-600 ">Everything you need</h4>
      <h1 class="mt-3 text-3xl font-bold leading-8 tracking-tight text-gray-900 lg:text-5xl ">No server? No problem.
      </h1>
      <p class="mt-6 text-lg font-normal leading-8 text-gray-600 ">Lorem ipsum, dolor sit amet consectetur adipisicing
        elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis.</p>
    </div>
  </div>
  <div class="relative pt-16 overflow-hidden ">
    <div class="px-6 mx-auto max-w-7xl lg:px-8"><img
        src="https://tailwindui.com/img/component-images/project-app-screenshot.png" alt="App photo"
        class="mb-[-12%] shadow-2xl w-full h-full rounded-xl ring-1 ring-gray-900/10" width="2432" height="1442">
      <div class="relative">
        <div class="pt-[7%] bg-gradient-to-t absolute from-white bottom-0 -inset-x-20  "></div>
      </div>
    </div>
  </div>
  <div class="relative px-6 mt-20 overflow-hidden lg:px-8 sm:mt-24">
    <div class="w-full h-full px-6 mx-auto max-w-7xl lg:px-8">
      <div
        class="grid max-w-2xl grid-cols-1 mx-auto sm:grid-cols-2 lg:max-w-none gap-y-10 gap-x-6 lg:gap-16 lg:gap-x-8 md:grid-cols-3">
        <div class="relative pl-10 text-base leading-7 ">
          <div class="inline pr-1 font-semibold">Push to deploy.<svg xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"
              class="absolute w-6 h-6 text-sm text-blue-600 top-1 left-1">
              <path fill-rule="evenodd"
                d="M5.5 17a4.5 4.5 0 0 1-1.44-8.765 4.5 4.5 0 0 1 8.302-3.046 3.5 3.5 0 0 1 4.504 4.272A4 4 0 0 1 15 17H5.5Zm3.75-2.75a.75.75 0 0 0 1.5 0V9.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z"
                clip-rule="evenodd"></path>
            </svg></div>
          <p class="inline tex-gray-500">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</p>
        </div>
        <div class="relative pl-10 text-base leading-7 ">
          <div class="inline pr-1 font-semibold">SSL certificates.<svg xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"
              class="absolute w-6 h-6 text-sm text-blue-600 top-1 left-1">
              <path fill-rule="evenodd"
                d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z"
                clip-rule="evenodd"></path>
            </svg></div>
          <p class="inline tex-gray-500">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem
            cupidatat commodo.</p>
        </div>
        <div class="relative pl-10 text-base leading-7 ">
          <div class="inline pr-1 font-semibold">Simple queues.<svg xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"
              class="absolute w-6 h-6 text-sm text-blue-600 top-1 left-1">
              <path fill-rule="evenodd"
                d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z"
                clip-rule="evenodd"></path>
            </svg></div>
          <p class="inline tex-gray-500">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.</p>
        </div>
        <div class="relative pl-10 text-base leading-7 ">
          <div class="inline pr-1 font-semibold">Advanced security.<svg xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"
              class="absolute w-6 h-6 text-sm text-blue-600 top-1 left-1">
              <path fill-rule="evenodd"
                d="M10 2.5c-1.31 0-2.526.386-3.546 1.051a.75.75 0 0 1-.82-1.256A8 8 0 0 1 18 9a22.47 22.47 0 0 1-1.228 7.351.75.75 0 1 1-1.417-.49A20.97 20.97 0 0 0 16.5 9 6.5 6.5 0 0 0 10 2.5ZM4.333 4.416a.75.75 0 0 1 .218 1.038A6.466 6.466 0 0 0 3.5 9a7.966 7.966 0 0 1-1.293 4.362.75.75 0 0 1-1.257-.819A6.466 6.466 0 0 0 2 9c0-1.61.476-3.11 1.295-4.365a.75.75 0 0 1 1.038-.219ZM10 6.12a3 3 0 0 0-3.001 3.041 11.455 11.455 0 0 1-2.697 7.24.75.75 0 0 1-1.148-.965A9.957 9.957 0 0 0 5.5 9c0-.028.002-.055.004-.082a4.5 4.5 0 0 1 8.996.084V9.15l-.005.297a.75.75 0 1 1-1.5-.034c.003-.11.004-.219.005-.328a3 3 0 0 0-3-2.965Zm0 2.13a.75.75 0 0 1 .75.75c0 3.51-1.187 6.745-3.181 9.323a.75.75 0 1 1-1.186-.918A13.687 13.687 0 0 0 9.25 9a.75.75 0 0 1 .75-.75Zm3.529 3.698a.75.75 0 0 1 .584.885 18.883 18.883 0 0 1-2.257 5.84.75.75 0 1 1-1.29-.764 17.386 17.386 0 0 0 2.078-5.377.75.75 0 0 1 .885-.584Z"
                clip-rule="evenodd"></path>
            </svg></div>
          <p class="inline tex-gray-500">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</p>
        </div>
        <div class="relative pl-10 text-base leading-7 ">
          <div class="inline pr-1 font-semibold">Powerful API.<svg xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"
              class="absolute w-6 h-6 text-sm text-blue-600 top-1 left-1">
              <path fill-rule="evenodd"
                d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
                clip-rule="evenodd"></path>
            </svg></div>
          <p class="inline tex-gray-500">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem
            cupidatat commodo.</p>
        </div>
        <div class="relative pl-10 text-base leading-7 ">
          <div class="inline pr-1 font-semibold">Database backups.<svg xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"
              class="absolute w-6 h-6 text-sm text-blue-600 top-1 left-1">
              <path
                d="M4.632 3.533A2 2 0 0 1 6.577 2h6.846a2 2 0 0 1 1.945 1.533l1.976 8.234A3.489 3.489 0 0 0 16 11.5H4c-.476 0-.93.095-1.344.267l1.976-8.234Z">
              </path>
              <path fill-rule="evenodd"
                d="M4 13a2 2 0 1 0 0 4h12a2 2 0 1 0 0-4H4Zm11.24 2a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V15Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V15a.75.75 0 0 0-.75-.75h-.01Z"
                clip-rule="evenodd"></path>
            </svg></div>
          <p class="inline tex-gray-500">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. </p>
        </div>
      </div>
    </div>
  </div>
</div>

Tailwind CSS

feature component