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)

1.4k

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

Typewriter effect
using javascript

Author:
Samuel Dawson

3 years ago

42.7k
Play, Pause and Stop buttons

Author:
Lukas Müller

3 years ago

11.4k
Elegant Dock
Useful Tailwind classes for constructing a basic Dock (usually used on mobile).

Author:
Nick Girga

10 months ago

909
Glassmorphism form

Author:
Sophia Baker

2 years ago

18.6k
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

8 months ago

1.2k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

1 year ago

1.3k
Responsive fullscreen youtube video

Author:
Anonymous

2 years ago

9.1k
Acode Master!
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

862
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

936
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

8 months ago

534
Neon container

Author:
Anonymous

1 year ago

3.9k
portfolio
Complete Portfolio UI Kit with hero, about, skills, projects, testimonials, contact form, and footer. Fully responsive and dark mode supported using Tailwind CSS.

Author:
Lekhraj Ghimire

8 months ago

845

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components