Our features

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

Other

Author Tanvir Hasan Bappy (Tanvir)

Tailwind v3.4 1.9k 5

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

Contact Page

Sedat Kumcu

1 year ago

2.1k
Apple Dock Navigation Bar

Cristian

1 year ago

3k
Taskify Premium Task Management FREE
Website Task management modern and responsif

Alif Bima Pradana

8 months ago

837
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Hamza Atig

1 year ago

2.1k
interview status

Anonymous

6 days ago

9
Simple dialpad

Brandon D

3 years ago

11.9k
card
card products.

Lisa

2 months ago

110
Half filled circle with tailwind

Alok

3 years ago

14.3k
Skills Showcase, My Tech Stack and Expertise & Skills
🚀 Showcasing My Skills with TailwindCSS & Flexbox! I’ve designed a responsive and interactive Skills Section using Tailwind CSS and Flexbox. With smooth hover effects and a clean layout, this section highlights my expertise in: 🔹 Frontend Technologies – HTML, CSS, JavaScript, React, Next.js 🔹 Styling Frameworks – TailwindCSS 🔹 Backend & Tools – Node.js, Git

Muhammad Umair Arshad

1 year ago

2k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

MD Mostafa Niloy

11 months ago

759
Free Tailwind components,
Free Tailwind components,

Omer fils ELENGA

2 weeks ago

32
Skill showcase section for resume / porfolio website
show skill progression

Ava Brown

3 years ago

14.6k