Our features

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 03-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Other

Author Tanvir Hasan Bappy (Tanvir)

805

Fork Fullscreen

<section class="flex flex-col gap-8 py-12 2xl:py-16 max-w-screen-2xl m-auto w-full px-3 sm:px-8 lg:px-16 xl:px-32">
    <h3 class="text-4xl font-semibold tracking-tight sm:max-md:text-center">Our features</h3>
    <div class="grid w-full grid-flow-row gap-x-0 gap-y-6 sm:max-md:justify-items-center md:grid-cols-2 md:justify-items-start md:gap-6 lg:grid-cols-3">
      <div class="flex max-w-lg flex-col items-start gap-6 overflow-hidden rounded-xl border border-slate-200">
        <div class="flex w-full items-center justify-center bg-[url('https://tailframes.com/images/squares-bg.webp')] bg-cover bg-center bg-no-repeat py-20 2xl:py-28">
          <svg width="128" height="132" viewBox="0 0 128 132" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-32">
            <g filter="url(#filter0_dd_3487_18637)">
              <path
                d="M6.21166 50.2316C2.78106 37.4284 10.379 24.2683 23.1822 20.8377L77.7682 6.21139C90.5714 2.78079 103.731 10.3788 107.162 23.1819L121.788 77.7679C125.219 90.5711 117.621 103.731 104.818 107.162L50.2318 121.788C37.4286 125.219 24.2685 117.621 20.8379 104.818L6.21166 50.2316Z"
                fill="url(#paint0_linear_3487_18637)"></path>
            </g>
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M79.3211 12.0069L24.7351 26.6332C15.1327 29.2062 9.43426 39.0762 12.0072 48.6786L26.6335 103.265C29.2064 112.867 39.0765 118.565 48.6789 115.993L103.265 101.366C112.867 98.7933 118.566 88.9232 115.993 79.3208L101.367 24.7349C98.7936 15.1325 88.9235 9.43399 79.3211 12.0069ZM23.1822 20.8377C10.379 24.2683 2.78106 37.4284 6.21166 50.2316L20.8379 104.818C24.2685 117.621 37.4286 125.219 50.2318 121.788L104.818 107.162C117.621 103.731 125.219 90.5711 121.788 77.7679L107.162 23.1819C103.731 10.3788 90.5714 2.78079 77.7682 6.21139L23.1822 20.8377Z"
              fill="white"></path>
            <g filter="url(#filter1_dd_3487_18637)">
              <path d="M75.4895 33.922L79.1948 47.7503L62.5168 52.2191L79.2288 65.2224L64.2187 69.2444L69.5391 89.1003L56.1968 92.6754L50.8764 72.8194L64.2187 69.2444L46.5061 56.5092L42.8008 42.6809L75.4895 33.922Z" fill="white"></path>
            </g>
            <defs>
              <filter id="filter0_dd_3487_18637" x="0.387939" y="4.3877" width="127.224" height="127.224" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                <feMorphology radius="1" operator="erode" in="SourceAlpha" result="effect1_dropShadow_3487_18637"></feMorphology>
                <feOffset dy="4"></feOffset>
                <feGaussianBlur stdDeviation="3"></feGaussianBlur>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix>
                <feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_3487_18637"></feBlend>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                <feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect2_dropShadow_3487_18637"></feMorphology>
                <feOffset dy="2"></feOffset>
                <feGaussianBlur stdDeviation="2"></feGaussianBlur>
                <feComposite in2="hardAlpha" operator="out"></feComposite>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix>
                <feBlend mode="normal" in2="effect1_dropShadow_3487_18637" result="effect2_dropShadow_3487_18637"></feBlend>
                <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_3487_18637" result="shape"></feBlend>
              </filter>
              <filter id="filter1_dd_3487_18637" x="37.8008" y="32.922" width="46.428" height="68.7534" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                <feMorphology radius="1" operator="erode" in="SourceAlpha" result="effect1_dropShadow_3487_18637"></feMorphology>
                <feOffset dy="4"></feOffset>
                <feGaussianBlur stdDeviation="3"></feGaussianBlur>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix>
                <feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_3487_18637"></feBlend>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                <feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect2_dropShadow_3487_18637"></feMorphology>
                <feOffset dy="2"></feOffset>
                <feGaussianBlur stdDeviation="2"></feGaussianBlur>
                <feComposite in2="hardAlpha" operator="out"></feComposite>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix>
                <feBlend mode="normal" in2="effect1_dropShadow_3487_18637" result="effect2_dropShadow_3487_18637"></feBlend>
                <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_3487_18637" result="shape"></feBlend>
              </filter>
              <linearGradient id="paint0_linear_3487_18637" x1="96.0511" y1="100.032" x2="72.1628" y2="14.9302" gradientUnits="userSpaceOnUse">
                <stop stop-color="#2050D9"></stop>
                <stop offset="1" stop-color="#6FA1F3"></stop>
              </linearGradient>
            </defs>
          </svg>
        </div>
        <div class="flex flex-col items-start gap-4 px-4 py-6 md:gap-6 md:px-8">
          <p class="text-2xl font-semibold tracking-tight">Headline</p>
          <p class="text-base text-slate-500">We've done it carefully and simply. Combined with the ingredients makes for beautiful landings.</p>
          <button type="button" aria-disabled="false"
            class="group inline-flex items-center justify-center whitespace-nowrap rounded-lg align-middle text-sm font-semibold leading-none transition-all duration-300 ease-in-out disabled:cursor-not-allowed stroke-blue-700 text-blue-700 h-[42px] min-w-[42px] gap-2 disabled:stroke-slate-400 disabled:text-slate-400 hover:stroke-blue-950 hover:text-blue-950 self-end p-0">
            <div>Read More</div>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1D4ED8" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" class="size-6 stroke-inherit">
              <path d="M11 16L15 12L11 8" stroke-linecap="round" stroke-linejoin="round"></path>
              <circle cx="12" cy="12" r="9"></circle>
            </svg>
          </button>
        </div>
      </div>
      <div class="flex max-w-lg flex-col items-start gap-6 overflow-hidden rounded-xl border border-slate-200">
        <div class="flex w-full items-center justify-center bg-[url('https://tailframes.com/images/squares-bg.webp')] bg-cover bg-center bg-no-repeat py-20 2xl:py-28">
          <svg width="128" height="132" viewBox="0 0 128 132" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-32">
            <g filter="url(#filter0_dd_3487_18637)">
              <path
                d="M6.21166 50.2316C2.78106 37.4284 10.379 24.2683 23.1822 20.8377L77.7682 6.21139C90.5714 2.78079 103.731 10.3788 107.162 23.1819L121.788 77.7679C125.219 90.5711 117.621 103.731 104.818 107.162L50.2318 121.788C37.4286 125.219 24.2685 117.621 20.8379 104.818L6.21166 50.2316Z"
                fill="url(#paint0_linear_3487_18637)"></path>
            </g>
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M79.3211 12.0069L24.7351 26.6332C15.1327 29.2062 9.43426 39.0762 12.0072 48.6786L26.6335 103.265C29.2064 112.867 39.0765 118.565 48.6789 115.993L103.265 101.366C112.867 98.7933 118.566 88.9232 115.993 79.3208L101.367 24.7349C98.7936 15.1325 88.9235 9.43399 79.3211 12.0069ZM23.1822 20.8377C10.379 24.2683 2.78106 37.4284 6.21166 50.2316L20.8379 104.818C24.2685 117.621 37.4286 125.219 50.2318 121.788L104.818 107.162C117.621 103.731 125.219 90.5711 121.788 77.7679L107.162 23.1819C103.731 10.3788 90.5714 2.78079 77.7682 6.21139L23.1822 20.8377Z"
              fill="white"></path>
            <g filter="url(#filter1_dd_3487_18637)">
              <path d="M75.4895 33.922L79.1948 47.7503L62.5168 52.2191L79.2288 65.2224L64.2187 69.2444L69.5391 89.1003L56.1968 92.6754L50.8764 72.8194L64.2187 69.2444L46.5061 56.5092L42.8008 42.6809L75.4895 33.922Z" fill="white"></path>
            </g>
            <defs>
              <filter id="filter0_dd_3487_18637" x="0.387939" y="4.3877" width="127.224" height="127.224" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                <feMorphology radius="1" operator="erode" in="SourceAlpha" result="effect1_dropShadow_3487_18637"></feMorphology>
                <feOffset dy="4"></feOffset>
                <feGaussianBlur stdDeviation="3"></feGaussianBlur>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix>
                <feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_3487_18637"></feBlend>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                <feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect2_dropShadow_3487_18637"></feMorphology>
                <feOffset dy="2"></feOffset>
                <feGaussianBlur stdDeviation="2"></feGaussianBlur>
                <feComposite in2="hardAlpha" operator="out"></feComposite>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix>
                <feBlend mode="normal" in2="effect1_dropShadow_3487_18637" result="effect2_dropShadow_3487_18637"></feBlend>
                <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_3487_18637" result="shape"></feBlend>
              </filter>
              <filter id="filter1_dd_3487_18637" x="37.8008" y="32.922" width="46.428" height="68.7534" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                <feMorphology radius="1" operator="erode" in="SourceAlpha" result="effect1_dropShadow_3487_18637"></feMorphology>
                <feOffset dy="4"></feOffset>
                <feGaussianBlur stdDeviation="3"></feGaussianBlur>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix>
                <feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_3487_18637"></feBlend>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                <feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect2_dropShadow_3487_18637"></feMorphology>
                <feOffset dy="2"></feOffset>
                <feGaussianBlur stdDeviation="2"></feGaussianBlur>
                <feComposite in2="hardAlpha" operator="out"></feComposite>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix>
                <feBlend mode="normal" in2="effect1_dropShadow_3487_18637" result="effect2_dropShadow_3487_18637"></feBlend>
                <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_3487_18637" result="shape"></feBlend>
              </filter>
              <linearGradient id="paint0_linear_3487_18637" x1="96.0511" y1="100.032" x2="72.1628" y2="14.9302" gradientUnits="userSpaceOnUse">
                <stop stop-color="#2050D9"></stop>
                <stop offset="1" stop-color="#6FA1F3"></stop>
              </linearGradient>
            </defs>
          </svg>
        </div>
        <div class="flex flex-col items-start gap-4 px-4 py-6 md:gap-6 md:px-8">
          <p class="text-2xl font-semibold tracking-tight">Headline</p>
          <p class="text-base text-slate-500">We've done it carefully and simply. Combined with the ingredients makes for&nbsp;beautiful landings.</p>
          <button type="button" aria-disabled="false"
            class="group inline-flex items-center justify-center whitespace-nowrap rounded-lg align-middle text-sm font-semibold leading-none transition-all duration-300 ease-in-out disabled:cursor-not-allowed stroke-blue-700 text-blue-700 h-[42px] min-w-[42px] gap-2 disabled:stroke-slate-400 disabled:text-slate-400 hover:stroke-blue-950 hover:text-blue-950 self-end p-0">
            <div>Read More</div>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1D4ED8" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" class="size-6 stroke-inherit">
              <path d="M11 16L15 12L11 8" stroke-linecap="round" stroke-linejoin="round"></path>
              <circle cx="12" cy="12" r="9"></circle>
            </svg>
          </button>
        </div>
      </div>
      <div class="flex max-w-lg flex-col items-start gap-6 overflow-hidden rounded-xl border border-slate-200">
        <div class="flex w-full items-center justify-center bg-[url('https://tailframes.com/images/squares-bg.webp')] bg-cover bg-center bg-no-repeat py-20 2xl:py-28">
          <svg width="128" height="132" viewBox="0 0 128 132" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-32">
            <g filter="url(#filter0_dd_3487_18637)">
              <path
                d="M6.21166 50.2316C2.78106 37.4284 10.379 24.2683 23.1822 20.8377L77.7682 6.21139C90.5714 2.78079 103.731 10.3788 107.162 23.1819L121.788 77.7679C125.219 90.5711 117.621 103.731 104.818 107.162L50.2318 121.788C37.4286 125.219 24.2685 117.621 20.8379 104.818L6.21166 50.2316Z"
                fill="url(#paint0_linear_3487_18637)"></path>
            </g>
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M79.3211 12.0069L24.7351 26.6332C15.1327 29.2062 9.43426 39.0762 12.0072 48.6786L26.6335 103.265C29.2064 112.867 39.0765 118.565 48.6789 115.993L103.265 101.366C112.867 98.7933 118.566 88.9232 115.993 79.3208L101.367 24.7349C98.7936 15.1325 88.9235 9.43399 79.3211 12.0069ZM23.1822 20.8377C10.379 24.2683 2.78106 37.4284 6.21166 50.2316L20.8379 104.818C24.2685 117.621 37.4286 125.219 50.2318 121.788L104.818 107.162C117.621 103.731 125.219 90.5711 121.788 77.7679L107.162 23.1819C103.731 10.3788 90.5714 2.78079 77.7682 6.21139L23.1822 20.8377Z"
              fill="white"></path>
            <g filter="url(#filter1_dd_3487_18637)">
              <path d="M75.4895 33.922L79.1948 47.7503L62.5168 52.2191L79.2288 65.2224L64.2187 69.2444L69.5391 89.1003L56.1968 92.6754L50.8764 72.8194L64.2187 69.2444L46.5061 56.5092L42.8008 42.6809L75.4895 33.922Z" fill="white"></path>
            </g>
            <defs>
              <filter id="filter0_dd_3487_18637" x="0.387939" y="4.3877" width="127.224" height="127.224" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                <feMorphology radius="1" operator="erode" in="SourceAlpha" result="effect1_dropShadow_3487_18637"></feMorphology>
                <feOffset dy="4"></feOffset>
                <feGaussianBlur stdDeviation="3"></feGaussianBlur>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix>
                <feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_3487_18637"></feBlend>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                <feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect2_dropShadow_3487_18637"></feMorphology>
                <feOffset dy="2"></feOffset>
                <feGaussianBlur stdDeviation="2"></feGaussianBlur>
                <feComposite in2="hardAlpha" operator="out"></feComposite>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix>
                <feBlend mode="normal" in2="effect1_dropShadow_3487_18637" result="effect2_dropShadow_3487_18637"></feBlend>
                <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_3487_18637" result="shape"></feBlend>
              </filter>
              <filter id="filter1_dd_3487_18637" x="37.8008" y="32.922" width="46.428" height="68.7534" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                <feMorphology radius="1" operator="erode" in="SourceAlpha" result="effect1_dropShadow_3487_18637"></feMorphology>
                <feOffset dy="4"></feOffset>
                <feGaussianBlur stdDeviation="3"></feGaussianBlur>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix>
                <feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_3487_18637"></feBlend>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                <feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect2_dropShadow_3487_18637"></feMorphology>
                <feOffset dy="2"></feOffset>
                <feGaussianBlur stdDeviation="2"></feGaussianBlur>
                <feComposite in2="hardAlpha" operator="out"></feComposite>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix>
                <feBlend mode="normal" in2="effect1_dropShadow_3487_18637" result="effect2_dropShadow_3487_18637"></feBlend>
                <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_3487_18637" result="shape"></feBlend>
              </filter>
              <linearGradient id="paint0_linear_3487_18637" x1="96.0511" y1="100.032" x2="72.1628" y2="14.9302" gradientUnits="userSpaceOnUse">
                <stop stop-color="#2050D9"></stop>
                <stop offset="1" stop-color="#6FA1F3"></stop>
              </linearGradient>
            </defs>
          </svg>
        </div>
        <div class="flex flex-col items-start gap-4 px-4 py-6 md:gap-6 md:px-8">
          <p class="text-2xl font-semibold tracking-tight">Headline</p>
          <p class="text-base text-slate-500">We've done it carefully and simply. Combined with the ingredients makes for&nbsp;beautiful landings.</p>
          <button type="button" aria-disabled="false"
            class="group inline-flex items-center justify-center whitespace-nowrap rounded-lg align-middle text-sm font-semibold leading-none transition-all duration-300 ease-in-out disabled:cursor-not-allowed stroke-blue-700 text-blue-700 h-[42px] min-w-[42px] gap-2 disabled:stroke-slate-400 disabled:text-slate-400 hover:stroke-blue-950 hover:text-blue-950 self-end p-0">
            <div>Read More</div>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1D4ED8" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" class="size-6 stroke-inherit">
              <path d="M11 16L15 12L11 8" stroke-linecap="round" stroke-linejoin="round"></path>
              <circle cx="12" cy="12" r="9"></circle>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </section>

Related Examples

Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

Author:
SHARIFUL ISLAM

7 months ago

1.4k
Mobile app
I'll create a comprehensive collection of professional app components that you can use to build modern mobile and web applications.

Author:
ishimwe prince

3 months ago

241
Innovative Developer & Digital Creator
Innovative Developer

Author:
gidy

3 months ago

501
Show credit card details

Author:
Manuela Bianka

2 years ago

11.8k
Contact us Form with Responsive

Author:
KULDEEP

2 months ago

193
profile
user profile

Author:
gidy

3 months ago

416
Track Your Order
Track Your Order

Author:
Tanvir Hasan Bappy (Tanvir)

5 months ago

247
Checkbox
Checkbox

Author:
Aman kumar

1 year ago

1.7k
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.3k
Services
This Services page design includes: 1. Responsive layout using Tailwind CSS grid system 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Header with navigation 5. Six service cards with icons, titles, and descriptions 6. Footer with copyright information 7. Subtle animations and transitions 8. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a white background in light mode and dark gray in dark mode - Service cards have a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency - Each service card has a hover effect that scales it up slightly - Service cards fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The design is fully responsive, adjusting from 1 to 3 columns based on screen size This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

10 months ago

2k
Contact Page

Author:
Sedat Kumcu

10 months ago

1.1k
Pytjon links

Author:
Rodion

3 days ago

7

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components