Home
Creative Solution
my website

my website

This tailwind example is contributed by Creative Solution, on 13-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Header

Author Creative Solution

1.6k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Abdul Basit Memon</title>
    <link rel="stylesheet" href="../src/styles.css">
    <link rel="stylesheet" href="./css/tailwind.css">

body {
            font-family: 'Poppins', sans-serif;
        }

.gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

.navbar-item {
            position: relative;
            transition: all 0.3s ease;
        }

.navbar-item::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%;
            background-color: #667eea;
            transition: all 0.3s ease;
        }

.navbar-item:hover::after {
            width: 100%;
            left: 0;
        }

.btn-primary {
            background-color: #667eea;
            transition: all 0.3s ease;
        }

.btn-primary:hover {
            background-color: #5a67d8;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
        }

.bg-animation {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
            background: radial-gradient(circle, rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 70%);
            animation: animateBackground 20s linear infinite;
        }

.bg-animation::before,
        .bg-animation::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.6);
            animation: circulate 4s linear infinite;
        }

.bg-animation::before {
            top: 20%;
            left: 30%;
        }

.bg-animation::after {
            top: 50%;
            left: 70%;
        }

@keyframes animateBackground {
            0% {
                transform: scale(1);
            }

50% {
                transform: scale(1.1);
            }

100% {
                transform: scale(1);
            }
        }

@keyframes circulate {
            0% {
                transform: translateX(0) translateY(0) scale(1);
            }

25% {
                transform: translateX(50px) translateY(-50px) scale(1.2);
            }

50% {
                transform: translateX(100px) translateY(0) scale(1);
            }

75% {
                transform: translateX(50px) translateY(50px) scale(1.2);
            }

100% {
                transform: translateX(0) translateY(0) scale(1);
            }
        }

.section-heading {
            position: relative;
            display: inline-block;
        }

.section-heading::after {
            content: '';
            position: absolute;
            width: 50%;
            height: 3px;
            bottom: -10px;
            left: 25%;
            background-color: #667eea;
        }

.card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

.card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

.skill-bar {
            height: 8px;
            background-color: #ddd;
            border-radius: 4px;
            overflow: hidden;
        }

.skill-progress {
            height: 100%;
            width: 0;
            background-color: #6B46C1;
        }
    </style>
</head>

<body class="bg-gray-100">
    <header x-data="{ isOpen: false }" class="bg-white shadow-md fixed w-full z-50">
        <nav class="container mx-auto px-6 py-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <a href="#" class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700">
                        <img src="./images/logo-removebg-preview.png" alt="Logo" class="h-8 w-8 mr-2 inline-block">
                        Abdul Basit Memon
                    </a>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#home" class="navbar-item text-gray-800 hover:text-indigo-600">Home</a>
                    <a href="#about" class="navbar-item text-gray-800 hover:text-indigo-600">About</a>
                    <a href="#projects" class="navbar-item text-gray-800 hover:text-indigo-600">Projects</a>
                    <a href="#services" class="navbar-item text-gray-800 hover:text-indigo-600">Services</a>
                    <a href="#contact" class="navbar-item text-gray-800 hover:text-indigo-600">Contact</a>
                    <a href="https://nas.io/prologware-solutions-3" target="_blank"
                        class="btn-primary text-white px-4 py-2 rounded-md">Join Us</a>
                </div>
                <div class="md:hidden flex items-center">
                    <button @click="isOpen = !isOpen" class="outline-none mobile-menu-button">
                        <svg class="w-6 h-6 text-gray-500 hover:text-indigo-600"
                            x-show="!isOpen"
                            fill="none"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                        <svg class="w-6 h-6 text-gray-500 hover:text-indigo-600"
                            x-show="isOpen"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
            </div>
            <div x-show="isOpen" class="md:hidden mt-3">
                <a href="#home"
                    class="block py-2 px-4 text-sm hover:bg-indigo-600 hover:text-white rounded transition duration-200">Home</a>
                <a href="#about"
                    class="block py-2 px-4 text-sm hover:bg-indigo-600 hover:text-white rounded transition duration-200">About</a>
                <a href="#projects"
                    class="block py-2 px-4 text-sm hover:bg-indigo-600 hover:text-white rounded transition duration-200">Projects</a>
                <a href="#services"
                    class="block py-2 px-4 text-sm hover:bg-indigo-600 hover:text-white rounded transition duration-200">Services</a>
                <a href="#contact"
                    class="block py-2 px-4 text-sm hover:bg-indigo-600 hover:text-white rounded transition duration-200">Contact</a>
                <a href="https://nas.io/prologware-solutions-3" target="_blank"
                    class="block py-2 px-4 text-sm bg-indigo-600 text-white rounded mt-2">Join Us</a>
            </div>
        </nav>
    </header>
    <main class="pt-16">

<section id="home" class="gradient-bg text-white min-h-screen flex items-center relative overflow-hidden">
            <div class="container mx-auto px-6 py-20 text-center relative z-10">
                <h1 class="text-4xl md:text-6xl font-bold mb-4">Welcome to My Portfolio</h1>
                <p class="text-xl md:text-2xl mb-8">I am Abdul Basit Memon, a passionate Computer Systems Engineering
                    student.</p>
                <div id="typing-text" class="text-lg md:text-xl mb-8 h-8 overflow-hidden">
                    Data Science | Graphic Design | Technology Enthusiast
                </div>
                <a href="./images/Resume.pdf"
                    class="btn-primary text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-indigo-700 transition duration-300">Download
                    CV</a>
            </div>
            <div class="bg-animation"></div>
        </section>

<section id="about" class="py-20 bg-white">
            <div class="container mx-auto px-6">
                <h2 class="section-heading text-3xl font-bold text-center mb-12">About Me</h2>
                <div class="flex flex-col md:flex-row items-center justify-center md:justify-between">
                    <div class="md:w-1/2 mb-8 md:mb-0 flex justify-center">
                        <img src="./images/abm.png" alt="Abdul Basit Memon" class="rounded-full w-64 h-64 object-cover object-center shadow-lg">
                    </div>
                    <div class="md:w-1/2 md:ml-12">
                        <p class="text-lg mb-6 ml-2">I am Abdul Basit Memon, a final-year Computer Systems Engineering
                            student with a passion for data science, graphic design, and technology. I have over two
                            years of experience in graphic designing and have led several innovative projects.</p>
                        <div class="space-y-4 ml-2">
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-base font-medium text-indigo-700">Data Science</span>
                                    <span class="text-sm font-medium text-indigo-700">85%</span>
                                </div>
                                <div class="skill-bar">
                                    <div class="skill-progress bg-indigo-200" style="width: 85%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-base font-medium text-indigo-700">Graphic Design</span>
                                    <span class="text-sm font-medium text-indigo-700">90%</span>
                                </div>
                                <div class="skill-bar">
                                    <div class="skill-progress bg-indigo-200" style="width: 90%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-base font-medium text-indigo-700">Web Development</span>
                                    <span class="text-sm font-medium text-indigo-700">75%</span>
                                </div>
                                <div class="skill-bar">
                                    <div class="skill-progress bg-indigo-200" style="width: 75%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="projects" class="py-20 bg-gray-100">
            <div class="container mx-auto px-6">
                <h2 class="section-heading text-3xl font-bold text-center mb-12">My Projects</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <div class="card bg-white rounded-lg overflow-hidden shadow-lg">
                        <img src="./images/project-1.png" alt="Project 1" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">Project Title 1</h3>
                            <p class="text-gray-600 mb-4">Short description of Project 1. This project demonstrates my
                                skills in XYZ.</p>
                            <div class="flex justify-between">
                                <a href="#" class="text-indigo-600 hover:text-indigo-800">View Project</a>
                                <a href="#" class="text-gray-600 hover:text-gray-800">
                                    <i class="fab fa-github"></i> GitHub
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card bg-white rounded-lg overflow-hidden shadow-lg">
                        <img src="./images/project-2.png" alt="Project 2" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">Project Title 2</h3>
                            <p class="text-gray-600 mb-4">Short description of Project 2. This project showcases my
                                expertise in ABC.</p>
                            <div class="flex justify-between">
                                <a href="#" class="text-indigo-600 hover:text-indigo-800">View Project</a>
                                <a href="#" class="text-gray-600 hover:text-gray-800">
                                    <i class="fab fa-github"></i> GitHub
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card bg-white rounded-lg overflow-hidden shadow-lg">
                        <img src="./images/project-3.jpg" alt="Project 3" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">Project Title 3</h3>
                            <p class="text-gray-600 mb-4">Short description of Project 3. This project highlights my
                                skills in DEF.</p>
                            <div class="flex justify-between">
                                <a href="#" class="text-indigo-600 hover:text-indigo-800">View Project</a>
                                <a href="#" class="text-gray-600 hover:text-gray-800">
                                    <i class="fab fa-github"></i> GitHub
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="services" class="py-20 bg-white">
            <div class="container mx-auto px-6">
                <h2 class="section-heading text-3xl font-bold text-center mb-12">My Services</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <div class="card bg-gray-100 rounded-lg p-6 text-center">
                        <i class="fas fa-palette text-4xl text-indigo-600 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">Graphic Design</h3>
                        <p class="text-gray-600">Professional graphic design services to bring your ideas to life.</p>
                    </div>
                    <div class="card bg-gray-100 rounded-lg p-6 text-center">
                        <i class="fas fa-calculator text-4xl text-indigo-600 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">Maths Tutoring</h3>
                        <p class="text-gray-600">Comprehensive math tutoring for students at all levels.</p>
                    </div>
                    <div class="card bg-gray-100 rounded-lg p-6 text-center">
                        <i class="fas fa-code text-4xl text-indigo-600 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">Web Development</h3>
                        <p class="text-gray-600">Professional web development services to build your online presence.
                        </p>
                    </div>
                    <div class="card bg-gray-100 rounded-lg p-6 text-center">
                        <i class="fas fa-chart-line text-4xl text-indigo-600 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">SEO Services</h3>
                        <p class="text-gray-600">Optimize your website to rank higher in search engine results.</p>
                    </div>
                    <div class="card bg-gray-100 rounded-lg p-6 text-center">
                        <i class="fas fa-camera text-4xl text-indigo-600 mb-4"></i>
                        <h3 class="text-xl font-bold mb-2">Photography</h3>
                        <p class="text-gray-600">Capture your moments with professional photography services.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="prologware" class="bg-gray-100 py-20">
            <div class="container mx-auto px-6">
                <h2 class="section-heading text-3xl font-bold text-center mb-12">Prologware Solutions</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                    <div
                        class="relative overflow-hidden rounded-lg shadow-xl transform hover:scale-105 transition-transform duration-300 ease-in-out">
                        <iframe class="w-full h-96 object-cover object-center"
                            src="https://www.youtube.com/embed/videoID" frameborder="0"
                            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen></iframe>
                    </div>
                    <div class="bg-white rounded-lg shadow-xl p-8">
                        <p class="text-lg text-gray-700 mb-6 leading-relaxed">Prologware Solutions focuses on community
                            building with the motto of
                            <span class="font-bold text-gray-900">'To Learn,' 'Grow,' 'Earn & Collab.'</span>
                        </p>
                        <ul class="space-y-4">
                            <li class="flex items-center space-x-3 text-gray-900">
                                <span class="text-blue-500">
                            <i class="fas fa-star"></i>
                        </span>
                                <span>Premium Courses</span>
                            </li>
                            <li class="flex items-center space-x-3 text-gray-900">
                                <span class="text-green-500">
                            <i class="fas fa-tools"></i>
                        </span>
                                <span>Tools and Resources</span>
                            </li>
                            <li class="flex items-center space-x-3 text-gray-900">
                                <span class="text-orange-500">
                            <i class="fas fa-graduation-cap"></i>
                        </span>
                                <span>Scholarship Updates</span>
                            </li>
                            <li class="flex items-center space-x-3 text-gray-900">
                                <span class="text-purple-500">
                            <i class="fas fa-briefcase"></i>
                        </span>
                                <span>Internships and Jobs</span>
                            </li>
                            <li class="flex items-center space-x-3 text-gray-900">
                                <span class="text-red-500">
                            <i class="fas fa-users"></i>
                        </span>
                                <span>Community Collaboration</span>
                            </li>
                        </ul>
                        <a href="https://nas.io/prologware-solutions-3" target="_blank"
                            class="inline-block bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 px-6 rounded-lg shadow-md hover:shadow-lg transform hover:scale-105 transition-transform duration-300 ease-in-out mt-6 text-lg font-semibold">
                            Join Our Community
                        </a>
                    </div>
                </div>
            </div>
        </section>
        
        <section class="bg-white dark:bg-gray-900">
            <div class="container px-6 py-12 mx-auto">
                <div class="lg:flex lg:items-center lg:-mx-6">
                    <div class="lg:w-1/2 lg:mx-6">
                        <h1 class="text-2xl font-semibold text-gray-800 capitalize dark:text-white lg:text-3xl">
                            Contact us for more info
                        </h1>

<span class="mx-2 text-gray-700 truncate w-72 dark:text-gray-400">
                                Old National Highway, Ameen Masjid
                                Iron Market street, 66020
                            </span>
                            </p>

<span class="mx-2 text-gray-700 truncate w-72 dark:text-gray-400">basitmemon67@gmail.com</span>
                            </p>
                        </div>

<div class="mt-6 w-80 md:mt-8">
                            <h3 class="text-gray-600 dark:text-gray-300 ">Follow us</h3>

<div class="flex-1 mt-6">
                                    <label class="block mb-2 text-sm text-gray-600 dark:text-gray-200">Email address</label>
                                    <input type="email" placeholder="johndoe@example.com" class="block w-full px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
                                </div>

<div class="w-full mt-6">
                                    <label class="block mb-2 text-sm text-gray-600 dark:text-gray-200">Message</label>
                                    <textarea class="block w-full h-32 px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md md:h-48 dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" placeholder="Message"></textarea>
                                </div>
                                <button class="w-full px-6 py-3 mt-6 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50">
                                get in touch
                            </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<footer class="bg-white dark:bg-gray-900">
            <div class="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
                <div class="md:flex md:justify-between">
                    <div class="mb-6 md:mb-0">
                        <a href="" class="flex items-center">
                            <img src="./images/logo-removebg-preview.png" class="h-8 me-3" alt="FlowBite Logo" />
                            <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">ABDUL Basit Memon</span>
                        </a>
                    </div>
                    <div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
                        <div>
                            <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Resources
                            </h2>
                            <ul class="text-gray-500 dark:text-gray-400 font-medium">
                                <li class="mb-4">
                                    <a href="https://flowbite.com/" class="hover:underline">Flowbite</a>
                                </li>
                                <li>
                                    <a href="https://tailwindcss.com/" class="hover:underline">Tailwind CSS</a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Follow us
                            </h2>
                            <ul class="text-gray-500 dark:text-gray-400 font-medium">
                                <li class="mb-4">
                                    <a href="https://github.com/themesberg/flowbite" class="hover:underline ">Github</a>
                                </li>
                                <li>
                                    <a href="https://discord.gg/4eeurUVvTy" class="hover:underline">Discord</a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Legal</h2>
                            <ul class="text-gray-500 dark:text-gray-400 font-medium">
                                <li class="mb-4">
                                    <a href="#" class="hover:underline">Privacy Policy</a>
                                </li>
                                <li>
                                    <a href="#" class="hover:underline">Terms &amp; Conditions</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
                <div class="sm:flex sm:items-center sm:justify-between">
                    <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2024 <a href="https://linktr.ee/abdulbasitmemon" class="hover:underline"> Abdul Basit MEMON™ </a>. All Rights Reserved.
          </span>
                    <div class="flex mt-4 sm:justify-center sm:mt-0">
                        <a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white">
                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                fill="currentColor" viewBox="0 0 8 19">
                                <path fill-rule="evenodd"
                                    d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="sr-only">Facebook page</span>
                        </a>
                        <a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5">
                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                fill="currentColor" viewBox="0 0 21 16">
                                <path
                                    d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
                            </svg>
                            <span class="sr-only">Discord community</span>
                        </a>
                        <a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5">
                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                fill="currentColor" viewBox="0 0 20 17">
                                <path fill-rule="evenodd"
                                    d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="sr-only">Twitter page</span>
                        </a>
                        <a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5">
                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="sr-only">GitHub account</span>
                        </a>
                        <a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5">
                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="sr-only">Dribbble account</span>
                        </a>
                    </div>
                </div>
            </div>
        </footer>

</html>

Related Examples

Stars-Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

Author:
Samuel Abera

8 months ago

2.5k
Hero Section
Home hero section search bar

Author:
Samuel Abera

9 months ago

4.6k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

2 months ago

1.1k
Header with logo, menu and buttons
Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

Author:
Mike Varen

7 months ago

2.5k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

1 year ago

9.3k
New Nav Component
A new navigation component

Author:
Amit PR

7 months ago

1.8k
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

Author:
zobaidul kaziex

5 months ago

1.6k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

2 weeks ago

316
Shrinkable Header
A shrinkable header with responsive menu using a little bit of plain javascript

Author:
farid

1 week ago

96
Animated navigation with Tailwind CSS and Apinejs

Author:
Michael Andreuzza

7 months ago

2.6k
Header with svg background

Author:
R.P Ketan

1 year ago

12.1k
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

4 months ago

645

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components