Home
Evgeniy R
portfolio 3

portfolio 3

This tailwind example is contributed by Evgeniy R, on 11-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Author box, User information

Profile

Author Evgeniy R

750

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<nav
    class="relative px-4 py-2 flex justify-between items-center bg-white dark:bg-gray-800 border-b-2 dark:border-gray-600">

<a class="text-2xl font-bold text-violet-600 dark:text-white" href="#">
        TailwindFlex
    </a>

<div class="lg:hidden">
        <button class="navbar-burger flex items-center text-violet-600 dark:text-gray-100 p-1" id="navbar_burger">
                <svg class="block h-6 w-6 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <title>Hamberger menu</title>
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
        </button>
    </div>

</div>
        </li>
    </ul>

<a href="https://tailwindflex.com/playground">
            <button class=" py-1.5 px-3 m-1 text-center bg-violet-700 border rounded-md text-white  hover:bg-violet-500 hover:text-gray-100 dark:text-gray-200 dark:bg-violet-700 hidden lg:block">
                    Tailwind Playground
            </button>
        </a>

</div>

</nav>

<section class="py-12 bg-gray-900 text-gray-100 sm:py-12 lg:py-16">
    <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
        <div class="max-w-xl mx-auto text-center xl:max-w-2xl">
            <h2 class="text-3xl font-bold leading-tight text-gray-50 sm:text-4xl xl:text-5xl mb-6">We are just
                getting started!</h2>
            <p class="mb-4">We are creating a tool that helps you be more productive and efficient when building
                websites and webapps</p>

</div>
        <div
            class="grid max-w-4xl lg:max-w-6xl grid-cols-1 mx-auto mt-8 text-center gap-y-4 sm:gap-x-8 sm:grid-cols-2 lg:grid-cols-3 sm:mt-12 lg:mt-20 sm:text-left">
            <div class="relative">
                <div class="absolute -inset-1">
                    <div
                        class="w-full h-full rotate-180 opacity-30 blur-lg filter bg-gradient-to-r from-yellow-400 via-pink-500 to-green-600">
                    </div>
                </div>
                <div class="relative overflow-hidden bg-white shadow-md rounded-xl h-full">
                    <div class="p-9"><svg class="w-12 h-12 mx-auto text-gray-400 sm:mx-0" viewBox="0 0 24 24"
                            fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11 8L20 8" stroke="#111827" stroke-width="2" stroke-linecap="round"></path>
                            <path d="M4 16L14 16" stroke="#111827" stroke-width="2" stroke-linecap="round"></path>
                            <ellipse cx="7" cy="8" rx="3" ry="3" transform="rotate(90 7 8)" stroke="#111827"
                                stroke-width="2" stroke-linecap="round"></ellipse>
                            <ellipse cx="17" cy="16" rx="3" ry="3" transform="rotate(90 17 16)" stroke="#111827"
                                stroke-width="2" stroke-linecap="round"></ellipse>
                        </svg>
                        <h3 class="mt-6 text-2xl font-bold text-gray-900 sm:mt-10">Realtime Collaboration</h3>
                        <p class="mt-6 text-base text-gray-600">Collaborate in realtime with other editors in a
                            project. See what othe editors are doing and edit even a simple text together</p>
                    </div>
                </div>
            </div>
            <div class="overflow-hidden bg-white shadow-md rounded-xl">
                <div class="p-9"><svg class="w-12 h-12 mx-auto text-gray-400 sm:mx-0" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <rect x="13" y="14" width="2" height="2" rx="1" fill="#111827"></rect>
                        <rect x="7" y="11" width="2" height="6" rx="1" fill="#111827"></rect>
                        <rect x="11" y="13" width="2" height="6" rx="1" transform="rotate(90 11 13)" fill="#111827">
                        </rect>
                        <rect x="16" y="12" width="2" height="2" rx="1" fill="#111827"></rect>
                        <path
                            d="M14 8V8C14 7.58326 14 7.37488 13.9655 7.19144C13.8455 6.5546 13.4245 6.01534 12.8358 5.74455C12.6662 5.66654 12.464 5.616 12.0597 5.51493L12 5.5C11.5388 5.3847 11.3082 5.32706 11.1171 5.233C10.5686 4.96315 10.1737 4.45731 10.0449 3.85979C10 3.65151 10 3.41382 10 2.93845V2"
                            stroke="#111827" stroke-width="2" stroke-linecap="round"></path>
                        <path
                            d="M3 14C3 11.4412 3 10.1618 3.61994 9.28042C3.77954 9.05351 3.96572 8.85041 4.17372 8.6763C4.98164 8 6.15442 8 8.5 8H15.5C17.8456 8 19.0184 8 19.8263 8.6763C20.0343 8.85041 20.2205 9.05351 20.3801 9.28042C21 10.1618 21 11.4412 21 14C21 16.5588 21 17.8382 20.3801 18.7196C20.2205 18.9465 20.0343 19.1496 19.8263 19.3237C19.0184 20 17.8456 20 15.5 20H8.5C6.15442 20 4.98164 20 4.17372 19.3237C3.96572 19.1496 3.77954 18.9465 3.61994 18.7196C3 17.8382 3 16.5588 3 14Z"
                            stroke="#111827" stroke-width="2"></path>
                    </svg>
                    <h3 class="mt-6 text-2xl font-bold text-gray-900 sm:mt-10">History of Edits</h3>
                    <p class="mt-6 text-base text-gray-600">Go back and forth your history of changes and
                        restore your designs to any point in time</p>
                </div>
            </div>
            <div class="relative">
                <div class="absolute -inset-1">
                    <div
                        class="w-full h-full rotate-180 opacity-30 blur-lg filter bg-gradient-to-r from-yellow-400 via-pink-500 to-green-600">
                    </div>
                </div>
                <div class="relative overflow-hidden bg-white shadow-md rounded-xl h-full">
                    <div class="p-9"><svg class="w-12 h-12 mx-auto text-gray-400 sm:mx-0" viewBox="0 0 24 24"
                            fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11 8L20 8" stroke="#111827" stroke-width="2" stroke-linecap="round"></path>
                            <path d="M4 16L14 16" stroke="#111827" stroke-width="2" stroke-linecap="round"></path>
                            <ellipse cx="7" cy="8" rx="3" ry="3" transform="rotate(90 7 8)" stroke="#111827"
                                stroke-width="2" stroke-linecap="round"></ellipse>
                            <ellipse cx="17" cy="16" rx="3" ry="3" transform="rotate(90 17 16)" stroke="#111827"
                                stroke-width="2" stroke-linecap="round"></ellipse>
                        </svg>
                        <h3 class="mt-6 text-2xl font-bold text-gray-900 sm:mt-10">Integrations</h3>
                        <p class="mt-6 text-base text-gray-600">Step up your designs and workflow with
                            integrations with your favourite tools such as mailchimp, slack, jira etc</p>
                    </div>
                </div>
            </div>
            <div class="overflow-hidden bg-white shadow-md rounded-xl">
                <div class="p-9"><svg class="w-12 h-12 mx-auto text-gray-400 sm:mx-0" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <rect x="13" y="14" width="2" height="2" rx="1" fill="#111827"></rect>
                        <rect x="7" y="11" width="2" height="6" rx="1" fill="#111827"></rect>
                        <rect x="11" y="13" width="2" height="6" rx="1" transform="rotate(90 11 13)" fill="#111827">
                        </rect>
                        <rect x="16" y="12" width="2" height="2" rx="1" fill="#111827"></rect>
                        <path
                            d="M14 8V8C14 7.58326 14 7.37488 13.9655 7.19144C13.8455 6.5546 13.4245 6.01534 12.8358 5.74455C12.6662 5.66654 12.464 5.616 12.0597 5.51493L12 5.5C11.5388 5.3847 11.3082 5.32706 11.1171 5.233C10.5686 4.96315 10.1737 4.45731 10.0449 3.85979C10 3.65151 10 3.41382 10 2.93845V2"
                            stroke="#111827" stroke-width="2" stroke-linecap="round"></path>
                        <path
                            d="M3 14C3 11.4412 3 10.1618 3.61994 9.28042C3.77954 9.05351 3.96572 8.85041 4.17372 8.6763C4.98164 8 6.15442 8 8.5 8H15.5C17.8456 8 19.0184 8 19.8263 8.6763C20.0343 8.85041 20.2205 9.05351 20.3801 9.28042C21 10.1618 21 11.4412 21 14C21 16.5588 21 17.8382 20.3801 18.7196C20.2205 18.9465 20.0343 19.1496 19.8263 19.3237C19.0184 20 17.8456 20 15.5 20H8.5C6.15442 20 4.98164 20 4.17372 19.3237C3.96572 19.1496 3.77954 18.9465 3.61994 18.7196C3 17.8382 3 16.5588 3 14Z"
                            stroke="#111827" stroke-width="2"></path>
                    </svg>
                    <h3 class="mt-6 text-2xl font-bold text-gray-900 sm:mt-10">Publish webpage online</h3>
                    <p class="mt-6 text-base text-gray-600">Effortlessly publish your webpages online and make
                        it available to the world with a click of a button</p>
                </div>
            </div>
            <div class="relative">
                <div class="absolute -inset-1">
                    <div
                        class="w-full h-full rotate-180 opacity-30 blur-lg filter bg-gradient-to-r from-yellow-400 via-pink-500 to-green-600">
                    </div>
                </div>
                <div class="relative overflow-hidden bg-white shadow-md rounded-xl h-full">
                    <div class="p-9"><svg class="w-12 h-12 mx-auto text-gray-400 sm:mx-0" viewBox="0 0 24 24"
                            fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11 8L20 8" stroke="#111827" stroke-width="2" stroke-linecap="round"></path>
                            <path d="M4 16L14 16" stroke="#111827" stroke-width="2" stroke-linecap="round"></path>
                            <ellipse cx="7" cy="8" rx="3" ry="3" transform="rotate(90 7 8)" stroke="#111827"
                                stroke-width="2" stroke-linecap="round"></ellipse>
                            <ellipse cx="17" cy="16" rx="3" ry="3" transform="rotate(90 17 16)" stroke="#111827"
                                stroke-width="2" stroke-linecap="round"></ellipse>
                        </svg>
                        <h3 class="mt-6 text-2xl font-bold text-gray-900 sm:mt-10">Forms and Data Collection
                        </h3>
                        <p class="mt-6 text-base text-gray-600">Collect data and information from users with
                            forms built on windframe and sort through them in a nice interface</p>
                    </div>
                </div>
            </div>
            <div class="overflow-hidden bg-white shadow-md rounded-xl">
                <div class="p-9"><svg class="w-12 h-12 mx-auto text-gray-400 sm:mx-0" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <rect x="13" y="14" width="2" height="2" rx="1" fill="#111827"></rect>
                        <rect x="7" y="11" width="2" height="6" rx="1" fill="#111827"></rect>
                        <rect x="11" y="13" width="2" height="6" rx="1" transform="rotate(90 11 13)" fill="#111827">
                        </rect>
                        <rect x="16" y="12" width="2" height="2" rx="1" fill="#111827"></rect>
                        <path
                            d="M14 8V8C14 7.58326 14 7.37488 13.9655 7.19144C13.8455 6.5546 13.4245 6.01534 12.8358 5.74455C12.6662 5.66654 12.464 5.616 12.0597 5.51493L12 5.5C11.5388 5.3847 11.3082 5.32706 11.1171 5.233C10.5686 4.96315 10.1737 4.45731 10.0449 3.85979C10 3.65151 10 3.41382 10 2.93845V2"
                            stroke="#111827" stroke-width="2" stroke-linecap="round"></path>
                        <path
                            d="M3 14C3 11.4412 3 10.1618 3.61994 9.28042C3.77954 9.05351 3.96572 8.85041 4.17372 8.6763C4.98164 8 6.15442 8 8.5 8H15.5C17.8456 8 19.0184 8 19.8263 8.6763C20.0343 8.85041 20.2205 9.05351 20.3801 9.28042C21 10.1618 21 11.4412 21 14C21 16.5588 21 17.8382 20.3801 18.7196C20.2205 18.9465 20.0343 19.1496 19.8263 19.3237C19.0184 20 17.8456 20 15.5 20H8.5C6.15442 20 4.98164 20 4.17372 19.3237C3.96572 19.1496 3.77954 18.9465 3.61994 18.7196C3 17.8382 3 16.5588 3 14Z"
                            stroke="#111827" stroke-width="2"></path>
                    </svg>
                    <h3 class="mt-6 text-2xl font-bold text-gray-900 sm:mt-10">Custom Domains</h3>
                    <p class="mt-6 text-base text-gray-600">Attach your own custom domain to your published
                        projects or website on windframe</p>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="flex items-center justify-center w-screen h-screen text-gray-800 p-10 bg-gray-200">
    
    <div class="grid lg:grid-cols-3 md:grid-cols-2 gap-6 w-full max-w-6xl">

<div class="flex items-center p-4 bg-white rounded">
            <div class="flex flex-shrink-0 items-center justify-center bg-green-200 h-16 w-16 rounded">
                <svg class="w-6 h-6 fill-current text-green-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                    fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="flex-grow flex flex-col ml-4">
                <span class="text-xl font-bold">$8,430</span>
                <div class="flex items-center justify-between">
                    <span class="text-gray-500">Revenue last 30 days</span>
                    <span class="text-green-500 text-sm font-semibold ml-2">+12.6%</span>
                </div>
            </div>
        </div>

<div class="flex items-center p-4 bg-white rounded">
            <div class="flex flex-shrink-0 items-center justify-center bg-red-200 h-16 w-16 rounded">
                <svg class="w-6 h-6 fill-current text-red-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                    fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="flex-grow flex flex-col ml-4">
                <span class="text-xl font-bold">211</span>
                <div class="flex items-center justify-between">
                    <span class="text-gray-500">Sales last 30 days</span>
                    <span class="text-red-500 text-sm font-semibold ml-2">-8.1%</span>
                </div>
            </div>
        </div>

<div class="flex items-center p-4 bg-white rounded">
            <div class="flex flex-shrink-0 items-center justify-center bg-green-200 h-16 w-16 rounded">
                <svg class="w-6 h-6 fill-current text-green-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                    fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="flex-grow flex flex-col ml-4">
                <span class="text-xl font-bold">140</span>
                <div class="flex items-center justify-between">
                    <span class="text-gray-500">Customers last 30 days</span>
                    <span class="text-green-500 text-sm font-semibold ml-2">+28.4%</span>
                </div>
            </div>
        </div>

</div>

</div>

<div class="navbar-menu relative z-50 hidden">
    <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-50"></div>
    <nav
        class="fixed bg-white dark:bg-gray-600 top-0 left-0 bottom-0 flex flex-col w-5/6 max-w-sm py-6 px-6 border-r overflow-y-auto">

<div class="flex items-center mb-8">
            <a class="mr-auto text-2xl font-bold text-black text-violet-600 dark:text-gray-100"
                href="https://tailwindflex.com/">
                TailwindFlex
            </a>

</div>

<a class="block py-1.5 px-3 m-1 text-center bg-violet-700 border rounded-md text-white  hover:bg-violet-500 hover:text-gray-100 dark:text-gray-200 dark:bg-violet-700 px-4 py-3 mb-2 text-xs text-center text-white font-semibold bg-violet-600 hover:bg-violet-700  rounded-xl"
                    href="https://tailwindflex.com/playground">
                    Tailwind Playground
                </a>

</div>
            <p class="my-4 text-xs text-center text-gray-400">
                <span>TailwindFlex Copyright © 2023</span>
            </p>
        </div>
    </nav>
</div>

<div
        class="flex flex-col justify-center items-center gap-2 border border-dashed border-gray-500 p-4 rounded-md h-32">
        <div class="flex gap-2 items-center">
            <span class="font-bold text-4xl">20</span>
            <svg class="w-8 h-8 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12l-3-3m0 0l-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z">
                </path>
            </svg>
        </div>
        <span class="font-semibold opacity-70 text-sm text-center">Documents Contributed</span>
    </div>

</div>
        <span class="font-semibold opacity-70 text-sm text-center">Thanks Received</span>
    </div>

<div
        class="flex flex-col justify-center items-center gap-2 border border-dashed border-gray-500 p-4 rounded-md h-32">
        <div class="flex gap-2 items-center">
            <span class="font-bold text-4xl">34K</span>
            <svg class="w-8 h-8 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
            </svg>
        </div>
        <span class="font-semibold opacity-70 text-sm text-center">Helped students</span>
    </div>

</div>
        <span class="font-semibold opacity-70 text-sm text-center">Highest Rank</span>
    </div>

</div>

var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
        var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

var themeToggleDarkIcon_2 = document.getElementById('theme-toggle-dark-icon-2');
        var themeToggleLightIcon_2 = document.getElementById('theme-toggle-light-icon-2');

// Change the icons inside the button based on previous settings
        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia(
            '(prefers-color-scheme: dark)').matches)) {
            themeToggleLightIcon.classList.remove('hidden');
            if (themeToggleDarkIcon_2) {
                themeToggleLightIcon_2.classList.remove('hidden');
            }
        } else {
            themeToggleDarkIcon.classList.remove('hidden');
            if (themeToggleDarkIcon_2) {
                themeToggleDarkIcon_2.classList.remove('hidden');
            }
        }

var themeToggleBtn_2 = document.getElementById('theme-toggle-2');
        if (themeToggleBtn_2) {

themeToggleBtn_2.addEventListener('click', function () {

// toggle icons inside button
                themeToggleDarkIcon_2.classList.toggle('hidden');
                themeToggleLightIcon_2.classList.toggle('hidden');

sync_theme()

});
        }

var themeToggleBtn = document.getElementById('theme-toggle');

themeToggleBtn.addEventListener('click', function () {

// toggle icons inside button
            themeToggleDarkIcon.classList.toggle('hidden');
            themeToggleLightIcon.classList.toggle('hidden');

sync_theme()

});

}

document.addEventListener('DOMContentLoaded', function () {
            // open
            const burger = document.querySelectorAll('.navbar-burger');
            const menu = document.querySelectorAll('.navbar-menu');

if (burger.length && menu.length) {
                for (var i = 0; i < burger.length; i++) {
                    burger[i].addEventListener('click', function () {
                        for (var j = 0; j < menu.length; j++) {
                            menu[j].classList.toggle('hidden');
                        }
                    });
                }
            }

// close
            const close = document.querySelectorAll('.navbar-close');
            const backdrop = document.querySelectorAll('.navbar-backdrop');

if (close.length) {
                for (var i = 0; i < close.length; i++) {
                    close[i].addEventListener('click', function () {
                        for (var j = 0; j < menu.length; j++) {
                            menu[j].classList.toggle('hidden');
                        }
                    });
                }
            }

if (backdrop.length) {
                for (var i = 0; i < backdrop.length; i++) {
                    backdrop[i].addEventListener('click', function () {
                        for (var j = 0; j < menu.length; j++) {
                            menu[j].classList.toggle('hidden');
                        }
                    });
                }
            }
        });
</script>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extreme Feature Section</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @keyframes neon-pulse {

0%,
            100% {
                text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00ffff, 0 0 35px #00ffff, 0 0 40px #00ffff, 0 0 50px #00ffff, 0 0 75px #00ffff;
            }

50% {
                text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #00ffff, 0 0 17px #00ffff, 0 0 20px #00ffff, 0 0 25px #00ffff, 0 0 37px #00ffff;
            }
        }

.neon-text {
            animation: neon-pulse 1.5s infinite alternate;
        }

.bg-animated {
            background: linear-gradient(-45deg, #000000, #1a1a1a, #000033, #003366);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }

@keyframes gradient {
            0% {
                background-position: 0% 50%;
            }

50% {
                background-position: 100% 50%;
            }

100% {
                background-position: 0% 50%;
            }
        }

.cyber-grid {
            background-image: linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
            animation: cyber-grid-move 20s linear infinite;
        }

@keyframes cyber-grid-move {
            0% {
                background-position: 0 0;
            }

100% {
                background-position: 20px 20px;
            }
        }

.feature-card {
            backdrop-filter: blur(10px);
            background-color: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(0, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
        }

.feature-icon {
            transition: all 0.3s ease;
        }

.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.2);
        }

@keyframes float {

0%,
            100% {
                transform: translateY(0);
            }

50% {
                transform: translateY(-20px);
            }
        }

.floating {
            animation: float 6s ease-in-out infinite;
        }

.glitch-effect {
            position: relative;
            overflow: hidden;
        }

.glitch-effect::before,
        .glitch-effect::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }

.glitch-effect::before {
            left: 2px;
            text-shadow: -2px 0 #ff00de;
            clip: rect(24px, 550px, 90px, 0);
            animation: glitch-anim 3s infinite linear alternate-reverse;
        }

.glitch-effect::after {
            left: -2px;
            text-shadow: -2px 0 #00ffff;
            clip: rect(85px, 550px, 140px, 0);
            animation: glitch-anim 2s infinite linear alternate-reverse;
        }

@keyframes glitch-anim {
            0% {
                clip: rect(39px, 9999px, 71px, 0);
            }

20% {
                clip: rect(3px, 9999px, 5px, 0);
            }

40% {
                clip: rect(6px, 9999px, 38px, 0);
            }

60% {
                clip: rect(13px, 9999px, 43px, 0);
            }

80% {
                clip: rect(44px, 9999px, 93px, 0);
            }

100% {
                clip: rect(54px, 9999px, 47px, 0);
            }
        }
    </style>
</head>

<body class="bg-black text-white min-h-screen">
    <main class="my-8 mx-2 md:mx-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <div class="bg-white p-6 border-2 border-dashed border-gray-400">
            <h2 class="text-lg font-bold text-gray-800 mb-4">Box 1</h2>
            <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac volutpat est.
                Praesent id purus a nunc pharetra facilisis.
            </p>
        </div>
        <div class="bg-white p-6 border-2 border-dashed border-gray-400">
            <h2 class="text-lg font-bold text-gray-800 mb-4">Box 2</h2>
            <p class="text-gray-600">Sed ornare sodales augue sed blandit. Sed tempor purus quis mauris consectetur, eu
                venenatis nunc bibendum.
            </p>
        </div>
        <div class="bg-white p-6 border-2 border-dashed border-gray-400">
            <h2 class="text-lg font-bold text-gray-800 mb-4">Box 3</h2>
            <p class="text-gray-600">Nullam maximus euismod dui vitae facilisis. Fusce vulputate justo id orci tincidunt
                commodo. Sed bibendum pharetra magna ut tempor.
            </p>
        </div>
        <div class="bg-white p-6 border-2 border-dashed border-gray-400">
            <h2 class="text-lg font-bold text-gray-800 mb-4">Box 4</h2>
            <p class="text-gray-600">Nullam maximus euismod dui vitae facilisis. Fusce vulputate justo id orci tincidunt
                commodo. Sed bibendum pharetra magna ut tempor.
            </p>
        </div>
        <div class="bg-white p-6 border-2 border-dashed border-gray-400">
            <h2 class="text-lg font-bold text-gray-800 mb-4">Box 5</h2>
            <p class="text-gray-600">Nullam maximus euismod dui vitae facilisis. Fusce vulputate justo id orci tincidunt
                commodo. Sed bibendum pharetra magna ut tempor.
            </p>
        </div>
        <div class="bg-white p-6 border-2 border-dashed border-gray-400">
            <h2 class="text-lg font-bold text-gray-800 mb-4">Box 6</h2>
            <p class="text-gray-600">Nullam maximus euismod dui vitae facilisis. Fusce vulputate justo id orci tincidunt
                commodo. Sed bibendum pharetra magna ut tempor.
            </p>
        </div>
    </main>

<div class="flex justify-center items-center xl:h-screen lg:h-screen md:h-screen sm:h-screen p-5">
        <div
            class="grid xl:grid-cols-4 lg:grid-cols-4 md:grid-cols-4 sm:grid-cols-2 grid-cols-1 xl:gap-5 lg:gap-5 md:gap-5 sm:gap-5 gap-5 px-5">
            <div class="text-center w-[200px] shadow-2xl rounded-2xl p-5 border">
                <h1 class="font-extrabold">Card</h1>
                <p class="text-sm">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus accusamus
                    perspiciatis at harum quaerat ad dolore, quia ea rerum pariatur minus. Doloremque, odit cum
                    inventore enim porro voluptatum laborum. Natus?</p>
            </div>

<div class="text-center w-[200px] shadow-2xl rounded-2xl p-5 border">
                <h1 class="font-extrabold">Card</h1>
                <p class="text-sm">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus accusamus
                    perspiciatis at harum quaerat ad dolore, quia ea rerum pariatur minus. Doloremque, odit cum
                    inventore enim porro voluptatum laborum. Natus?</p>
            </div>

</div>
    </div>

<div class="bg-white w-full px-4 pt-16 pb-16" id="faq">
        <h2 class="text-4xl font-bold text-center">Happy Customers</h2>
        <p class="pt-6 pb-8 text-base max-w-2xl text-center m-auto">
            Lorem ipsum dolor sit amet
            consectetur adipisicing elit nam maxime quas fugiat tempore blanditiis, eveniet quia accusantium.
        </p>
        <div
            class="mx-auto w-full max-w-4xl bg-white justify-center items-center grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
            <a target="_blank" href="">
                <img alt="" class="h-20  mx-auto" src="https://www.svgrepo.com/show/442910/brand-apple.svg">
            </a>
            <a target="_blank" href="">
                <img alt="" class="h-20  mx-auto" src="https://www.svgrepo.com/show/443329/brand-pixar.svg">
            </a>
            <a target="_blank" href="">
                <img alt="" class="h-20  mx-auto" src="https://www.svgrepo.com/show/443079/brand-geforce.svg">
            </a>
            <a target="_blank" href="">
                <img alt="" class="h-20  mx-auto" src="https://www.svgrepo.com/show/443042/brand-ethereum.svg">
            </a>
            <a target="_blank" href="">
                <img alt="" class="h-20  mx-auto" src="https://www.svgrepo.com/show/443206/brand-line.svg">
            </a>
            <a target="_blank" href="">
                <img alt="" class="h-20  mx-auto" src="https://www.svgrepo.com/show/519278/slack.svg">
            </a>
        </div>
    </div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-10 p-10">
        <div class="flex border border-gray-500 rounded-lg p-4 bg-white"><svg xmlns="http://www.w3.org/2000/svg"
                class="text-green-500 flex-shrink-0" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M5 12l5 5l10 -10"></path>
            </svg>
            <div class="ml-2">
                <h4 class="font-semibold text-base text-primary tracking-normal">Proof of work</h4>
                <p class="text-sm font-normal text-gray tracking-normal">No guess-work. Hire based on proof-of-work!</p>
            </div>
        </div>
        <div class="flex border border-gray-500 rounded-lg p-4 bg-white"><svg xmlns="http://www.w3.org/2000/svg"
                class="text-green-500 flex-shrink-0" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M5 12l5 5l10 -10"></path>
            </svg>
            <div class="ml-2">
                <h4 class="font-semibold text-base text-primary tracking-normal">Resume</h4>
                <p class="text-sm font-normal text-gray tracking-normal">Check qualifications, resumé and verified work
                    experience.</p>
            </div>
        </div>
        <div class="flex border border-gray-500 rounded-lg p-4 bg-white"><svg xmlns="http://www.w3.org/2000/svg"
                class="text-green-500 flex-shrink-0" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M5 12l5 5l10 -10"></path>
            </svg>
            <div class="ml-2">
                <h4 class="font-semibold text-base text-primary tracking-normal">Unique Candidate Details</h4>
                <p class="text-sm font-normal text-gray tracking-normal">Know if candidate is holding any offer, notice
                    period and much more.</p>
            </div>
        </div>
        <div class="flex border border-gray-500 rounded-lg p-4 bg-white"><svg xmlns="http://www.w3.org/2000/svg"
                class="text-green-500 flex-shrink-0" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M5 12l5 5l10 -10"></path>
            </svg>
            <div class="ml-2">
                <h4 class="font-semibold text-base text-primary tracking-normal">ATS Integrations</h4>
                <p class="text-sm font-normal text-gray tracking-normal">Integrate with your existing ATS to import job
                    posts automatically.</p>
            </div>
        </div>
    </div>

<section class="bg-animated cyber-grid py-20 relative overflow-hidden">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-center mb-12 neon-text glitch-effect" data-text="QUANTUM FEATURES">
                QUANTUM FEATURES</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="feature-card rounded-lg p-6 floating">
                    <div class="text-5xl mb-4 text-cyan-400 feature-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-2">Neuro-Link AI</h3>
                    <p class="text-gray-300">Interface directly with our advanced AI using cutting-edge neural
                        technology.</p>
                </div>
                <div class="feature-card rounded-lg p-6 floating" style="animation-delay: 1s;">
                    <div class="text-5xl mb-4 text-pink-500 feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-2">Quantum Encryption</h3>
                    <p class="text-gray-300">Unbreakable security powered by quantum entanglement protocols.</p>
                </div>
                <div class="feature-card rounded-lg p-6 floating" style="animation-delay: 2s;">
                    <div class="text-5xl mb-4 text-purple-500 feature-icon">
                        <i class="fas fa-vr-cardboard"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-2">Holo-Projection</h3>
                    <p class="text-gray-300">Experience fully immersive 3D holographic environments.</p>
                </div>
                <div class="feature-card rounded-lg p-6 floating" style="animation-delay: 0.5s;">
                    <div class="text-5xl mb-4 text-green-400 feature-icon">
                        <i class="fas fa-network-wired"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-2">Nano-Network</h3>
                    <p class="text-gray-300">Microscopic nodes form an intelligent, self-healing network infrastructure.
                    </p>
                </div>
                <div class="feature-card rounded-lg p-6 floating" style="animation-delay: 1.5s;">
                    <div class="text-5xl mb-4 text-yellow-400 feature-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-2">Fusion Power</h3>
                    <p class="text-gray-300">Harness the power of stars with our miniaturized fusion reactors.</p>
                </div>
                <div class="feature-card rounded-lg p-6 floating" style="animation-delay: 2.5s;">
                    <div class="text-5xl mb-4 text-red-500 feature-icon">
                        <i class="fas fa-dna"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-2">Bio-Enhancement</h3>
                    <p class="text-gray-300">Augment your physical and mental capabilities with programmable nanobots.
                    </p>
                </div>
            </div>
        </div>
    </section>

<div
                    class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                    <div class="flex gap-4">
                        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg" alt="user avatar" width="400" height="400" loading="lazy">
                        <div>
                            <h6 class="text-lg font-medium text-gray-700 dark:text-white">Daniella Doe</h6>
                            <p class="text-sm text-gray-500 dark:text-gray-300">Mobile dev</p>
                        </div>
                    </div>
                    <p class="mt-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aliquid quo eum quae
                        quos
                        illo earum ipsa doloribus nostrum minus libero aspernatur laborum cum, a suscipit, ratione ea
                        totam
                        ullam! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam deleniti
                        aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at
                        reprehenderit, veritatis harum et rerum.
                    </p>
                </div>

<div
                    class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                    <div class="flex gap-4">
                        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/14.jpg" alt="user avatar" width="200" height="200" loading="lazy">
                        <div>
                            <h6 class="text-lg font-medium text-gray-700 dark:text-white">Jane doe</h6>
                            <p class="text-sm text-gray-500 dark:text-gray-300">Marketing</p>
                        </div>
                    </div>
                    <p class="mt-8"> Lorem ipsum dolor laboriosam deleniti aperiam ab veniam sint non cumque quis
                        tempore
                        cupiditate. Sint libero voluptas veniam at reprehenderit, veritatis harum et rerum.
                    </p>
                </div>

<div
                    class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                    <div class="flex gap-4">
                        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/18.jpg" alt="user avatar" width="200" height="200" loading="lazy">
                        <div>
                            <h6 class="text-lg font-medium text-gray-700 dark:text-white">Yanick Doe</h6>
                            <p class="text-sm text-gray-500 dark:text-gray-300">Developer</p>
                        </div>
                    </div>
                    <p class="mt-8">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam
                        deleniti
                        aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at
                        reprehenderit, veritatis harum et rerum.
                    </p>
                </div>

<div
                    class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                    <div class="flex gap-4">
                        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="user avatar" width="200" height="200" loading="lazy">
                        <div>
                            <h6 class="text-lg font-medium text-gray-700 dark:text-white">Jane Doe</h6>
                            <p class="text-sm text-gray-500 dark:text-gray-300">Mobile dev</p>
                        </div>
                    </div>
                    <p class="mt-8">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam
                        deleniti
                        aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at
                        reprehenderit, veritatis harum et rerum.
                    </p>
                </div>

<div
                    class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                    <div class="flex gap-4">
                        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/62.jpg" alt="user avatar" width="200" height="200" loading="lazy">
                        <div>
                            <h6 class="text-lg font-medium text-gray-700 dark:text-white">Andy Doe</h6>
                            <p class="text-sm text-gray-500 dark:text-gray-300">Manager</p>
                        </div>
                    </div>
                    <p class="mt-8"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam
                        deleniti aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam
                        at
                        reprehenderit, veritatis harum et rerum.
                    </p>
                </div>

<div
                    class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                    <div class="flex gap-4">
                        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/19.jpg" alt="user avatar" width="400" height="400" loading="lazy">
                        <div>
                            <h6 class="text-lg font-medium text-gray-700 dark:text-white">Yanndy Doe</h6>
                            <p class="text-sm text-gray-500 dark:text-gray-300">Mobile dev</p>
                        </div>
                    </div>
                    <p class="mt-8">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam
                        deleniti
                        aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at
                        reprehenderit, veritatis harum et rerum.
                    </p>
                </div>

</div>
        </div>
    </div>

<p class="font-[Inter] text-lg text-[#252432] my-5">Web Design</p>

<p class="font-[Inter] text-sm text-[#8987A1] font-[400]">From concept to launch, we create
                    stunning, user-centric websites that elevate your brand and engage your audience.</p>

</div>

</button>

<p class="font-[Inter] text-lg text-[#252432] my-5">UI/UX Design</p>

<p class="font-[Inter] text-sm text-[#8987A1] font-[400]">From concept to launch, we create
                    stunning, user-centric websites that elevate your brand and engage your audience.</p>

</div>

</button>

<p class="font-[Inter] text-lg text-[#252432] my-5">Responsive Design</p>

<p class="font-[Inter] text-sm text-[#8987A1] font-[400]">From concept to launch, we create
                    stunning, user-centric websites that elevate your brand and engage your audience.</p>

</div>

</button>

<p class="font-[Inter] text-lg text-[#252432] my-5">E-commerce Solutions:</p>

<p class="font-[Inter] text-sm text-[#8987A1] font-[400]">From concept to launch, we create
                    stunning, user-centric websites that elevate your brand and engage your audience.</p>

</div>

</button>

<p class="font-[Inter] text-lg text-[#252432] my-5">Webflow</p>

<p class="font-[Inter] text-sm text-[#8987A1] font-[400]">From concept to launch, we create
                        stunning, user-centric websites that elevate your brand and engage your audience.</p>

</div>
                <div>
                    <img class="hidden lg:block mt-5 rounded-[10px]" src="https://images.pexels.com/photos/1181467/pexels-photo-1181467.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=400" alt="Pictures" />
                </div>

</div>

</button>

<p class="font-[Inter] text-lg text-[#252432] my-5">Custom Development</p>

<p class="font-[Inter] text-sm text-[#8987A1] font-[400]">From concept to launch, we create
                    stunning, user-centric websites that elevate your brand and engage your audience.</p>

</div>

</div>
    </div>

<section id="features" class="px-2 space-y-6 py-8 md:py-12 lg:py-24 max-w-5xl mx-auto">
        <div class="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center">
            <h2 class="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl">Features</h2>
            <p class="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">
                Tools to empower your creative journey, enabling you to bring your artistic
                visions to life effortlessly.
        </div>
        <div class="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3">
            <div class="relative overflow-hidden rounded-lg border bg-gray-100/50 p-2">
                <div class="flex h-[180px] flex-col justify-between rounded-md p-6"><svg
                        xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
                        <polygon points="12 2 19 21 12 17 5 21 12 2"></polygon>
                    </svg>
                    <div class="space-y-2">
                        <h3 class="font-bold">Custom Brushes</h3>
                        <p class="text-sm text-muted-foreground">Enhance your creativity with a variety of custom
                            brushes.
                        </p>
                    </div>
                </div>
            </div>
            <div class="relative overflow-hidden rounded-lg border bg-gray-100/50 p-2">
                <div class="flex h-[180px] flex-col justify-between rounded-md p-6"><svg
                        xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="12" y1="8" x2="12" y2="16"></line>
                        <line x1="12" y1="16" x2="16" y2="12"></line>
                        <line x1="12" y1="16" x2="8" y2="12"></line>
                    </svg>
                    <div class="space-y-2">
                        <h3 class="font-bold">Layer Management</h3>
                        <p class="text-sm text-muted-foreground">Efficiently organize your artwork with layer management
                            tools.</p>
                    </div>
                </div>
            </div>
            <div class="relative overflow-hidden rounded-lg border bg-gray-100/50 p-2">
                <div class="flex h-[180px] flex-col justify-between rounded-md p-6"><svg
                        xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                        <line x1="3" y1="9" x2="21" y2="9"></line>
                        <line x1="3" y1="15" x2="21" y2="15"></line>
                        <line x1="9" y1="3" x2="9" y2="21"></line>
                        <line x1="15" y1="3" x2="15" y2="21"></line>
                    </svg>
                    <div class="space-y-2">
                        <h3 class="font-bold">Live Collaboration</h3>
                        <p class="text-sm text-muted-foreground">Work simultaneously with others on the same project in
                            real-time.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<div class="bg-white dark:bg-gray-900 h-screen">
        <div class="container mx-auto py-16 dark:text-white">
            <div class="text-center">
                <h2 class="font-bold text-2xl md:text-4xl my-4">What is included in the AI Tool Service?</h2>
                <div class="max-w-2xl md:max-w-4xl mx-auto dark:text-gray-300">
                    <p>
                        Our AI Tool Service encompasses a comprehensive analysis with over 50 modules, examining more
                        than
                        200 data points. We offer 5 distinct functionalities and support 4 different file formats.
                    </p>
                </div>
            </div>
            <div class="grid grid-cols-2 mx-auto max-w-xl md:max-w-2xl gap-4 my-4">
                <div class="p-4 border flex flex-col items-center rounded max-w-sm dark:bg-gray-800">
                    <div class="text-4xl font-bold">150<span class="text-yellow-500">+</span></div>
                    <div class="text-300 text-uppercase">Features Analyzed</div>
                </div>
                <div class="p-4 border flex flex-col items-center rounded max-w-sm dark:bg-gray-800">
                    <div class="text-4xl font-bold">60<span class="text-teal-500">+</span></div>
                    <div class="text-300 text-uppercase">Modules</div>
                </div>
                <div class="p-4 border flex flex-col items-center rounded max-w-sm dark:bg-gray-800">
                    <div class="text-4xl font-bold">5<span class="text-pink-500">+</span></div>
                    <div class="text-300 text-uppercase">Functionalities</div>
                </div>
                <div class="p-4 border flex flex-col items-center rounded max-w-sm dark:bg-gray-800">
                    <div class="text-4xl font-bold">4<span class="text-violet-500">+</span></div>
                    <div class="text-300 text-uppercase">File Formats Supported</div>
                </div>
            </div>
        </div>
    </div>

<div class="h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-white">
        <div class="container mx-auto px-4 py-8">
            <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-8">
                Featured Resources
            </h2>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
                    <img src="https://tailwindcss.com/_next/static/media/headlessui@75.c1d50bc1.jpg"
                        alt="Headless UI" class="w-full h-64 object-cover">
                    <div class="p-4 md:p-6">
                        <h3 class="text-xl font-semibold text-indigo-500 dark:text-indigo-300 mb-2">Headless UI</h3>
                        <p class="text-gray-700 dark:text-gray-300 mb-4 two-lines">
                            Completely unstyled, fully accessible UI
                            components,
                            designed to integrate beautifully with Tailwind CSS.
                        </p>
                        <a href="#"
                            class="inline-block bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-full">Learn
                            More</a>
                    </div>
                </div>

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
                    <img src="https://tailwindcss.com/_next/static/media/heroicons@75.4a558f35.jpg"
                        alt="Heroicons" class="w-full h-64 object-cover">
                    <div class="p-4 md:p-6">
                        <h3 class="text-xl font-semibold text-purple-500 dark:text-purple-300 mb-2">Heroicons</h3>
                        <p class="text-gray-700 dark:text-gray-300 mb-4 two-lines">A set of 450+ free MIT-licensed SVG
                            icons.
                            Available
                            as basic SVG icons and via first-party React and Vue libraries.</p>
                        <a href="#"
                            class="inline-block bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-full">Learn
                            More</a>
                    </div>
                </div>

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
                    <img src="https://tailwindcss.com/_next/static/media/heropatterns@75.82a09697.jpg"
                        alt="Hero Patterns" class="w-full h-64 object-cover">
                    <div class="p-4 md:p-6">
                        <h3 class="text-xl font-semibold text-cyan-500 dark:text-cyan-300 mb-2">Hero Patterns</h3>
                        <p class="text-gray-700 dark:text-gray-300 mb-4 two-lines">A collection of over 100 free
                            MIT-licensed
                            high-quality
                            SVG patterns for you to use in your web projects.</p>
                        <a href="#"
                            class="inline-block bg-cyan-500 hover:bg-cyan-600 text-white px-4 py-2 rounded-full">Learn
                            More</a>
                    </div>
                </div>

</div>
        </div>
    </div>

<p class="flex justify-center w-full gap-2 pt-4 font-extrabold text-2xl md:text-3xl dark:text-white">
                <span>Impact</span>

<div title="All countributed components"
                    class="flex flex-col justify-center items-center gap-2 border-2 border-dashed border-gray-500/50 p-4 rounded-md h-32 dark:text-gray-200">
                    <div class="flex gap-2 items-center">
                        <span class="font-bold text-3xl md:text-4xl">
                    30
                </span>
                        <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"></path>
                        </svg>
                    </div>
                    <span class="font-semibold text-sm text-center">Components contributed</span>
                </div>

<div title="Users got help"
                    class="flex flex-col justify-center items-center gap-2 border-2 border-dashed border-gray-500/50 p-4 rounded-md h-32 dark:text-gray-200">
                    <div class="flex gap-2 items-center">
                        <span class="font-bold text-3xl md:text-4xl">
                    93.9k
                </span>
                        <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z">
                            </path>
                        </svg>
                    </div>
                    <span class="font-semibold text-sm text-center">Users got help</span>
                </div>

<div title="Total favorites received on components"
                    class="flex flex-col justify-center items-center gap-2 border-2 border-dashed border-gray-500/50 p-4 rounded-md h-32 dark:text-gray-200">
                    <div class="flex gap-2 items-center">
                        <span class="font-bold text-3xl md:text-4xl">
                    60
                </span>
                        <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z">
                            </path>
                        </svg>
                    </div>
                    <span class="font-semibold text-sm text-center">Favorites received</span>
                </div>

<div title="component views"
                    class="md:col-start-2 lg:col-auto flex flex-col justify-center items-center gap-2 border-2 border-dashed border-gray-500/50 p-4 rounded-md h-32 dark:text-gray-200">
                    <div class="flex gap-2 items-center">
                        <span class="font-bold text-3xl md:text-4xl">
                    3.3k
                </span>
                        <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z">
                            </path>
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z">
                            </path>
                        </svg>
                    </div>
                    <span class="font-semibold text-sm text-center">Views in last 30 days</span>
                </div>

</div>

</body>

</html>

Related Examples

User | Author profile card

Author:
Computer guy

1 year ago

7.8k
Jobs recommended for you
This HTML page is a responsive, dark-mode-friendly job recommendation interface designed using Tailwind CSS. It displays job listings in a card format, each showing: A colorful header background. A company logo/profile image styled as a rounded thumbnail. A job title (e.g., Senior Product Designer). A company name. A location with an icon. Job type (e.g., Full-time). Time since posting (e.g., 2d ago).

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

390
Responsive user card with tailwind

Author:
Gopi Yadav

2 years ago

11.3k
Startup page

Author:
ORGIN_DREAMS

4 months ago

289
Uses emoji for attention, mentions key features (modern, responsive, accessible)
Drop-in Tailwind CSS profile card component with responsive layout, gradient header, and hover effects - zero custom CSS needed. Features skill tags, social icons, and clean stats display. Just copy-paste the HTML, swap in your details, and you're live. Perfect for portfolios, developer profiles, or link-in-bio pages.

Author:
Muhammad Umair Arshad

5 months ago

678
Modern resume template
modern resume template with data

Author:
Nataraj Nataraj

1 month ago

93
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Author:
Prajwal Hallale

2 years ago

7.3k
Profile Card

Author:
Crimson

8 months ago

1.1k
Portfolio Hero Section 4

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

10 months ago

3.3k
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

282
User profile card

Author:
Mr Robot

2 years ago

11.1k
User Profile
User Profile

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

5.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components