Home
Alif Bima Pradana
Websites built to perform beautifully.

Websites built to perform beautifully.

We design high-impact websites that convert and scale. From sleek interfaces to full stack experiences, we bring your brand to life online.

This tailwind example is contributed by Alif Bima Pradana, on 07-Feb-2026. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Alif Bima Pradana

Fork Fullscreen

* {
        font-family: 'Poppins', sans-serif;
    }
</style>
<section class="flex flex-col items-center bg-linear-to-b from-[#D9D9FF] to-[#F8F3F9] px-4 py-4">
    <nav class="flex items-center justify-between gap-8 bg-white/60 border border-white rounded-full px-4 md:px-2 py-2.5 w-full max-w-3xl">
        <a href="https://www.alifbima.my.id" class="flex items-center md:pl-3">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="m12.75 8.3 6.75 3.884L26.25 8.3m-13.5 23.28v-7.755L6 19.94m27 0-6.75 3.885v7.754M6.405 12.408 19.5 19.954l13.095-7.546M19.5 35V19.94M33 25.914V13.962a2.98 2.98 0 0 0-1.5-2.585L21 5.4a3.01 3.01 0 0 0-3 0L7.5 11.377A3 3 0 0 0 6 13.962v11.953A2.98 2.98 0 0 0 7.5 28.5L18 34.477a3.01 3.01 0 0 0 3 0L31.5 28.5a3 3 0 0 0 1.5-2.585" stroke="#7c3aed" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </a>
        <div class="w-0.5 h-8 bg-gray-50 hidden md:flex"></div>
        <div id="menu" class="max-md:hidden max-md:absolute max-md:top-0 max-md:z-10 max-md:left-0 max-md:w-full max-md:h-full max-md:bg-white/70 max-md:backdrop-blur max-md:flex-col max-md:justify-center flex items-center gap-8 md:gap-8 flex-1 max-md:transition-all max-md:duration-300 max-md:ease-in-out" >
            <a href="#" class="menu-item text-gray-600 hover:text-gray-700 text-sm">Services</a>
            <a href="#" class="menu-item text-gray-600 hover:text-gray-700 text-sm">Reviews</a>
            <a href="#" class="menu-item text-gray-600 hover:text-gray-700 text-sm">Pricing</a>
            <a href="#" class="menu-item text-gray-600 hover:text-gray-700 text-sm">Projects</a>
            <a href="#" class="menu-item text-gray-600 hover:text-gray-700 text-sm">Contact Us</a>

<div class="flex items-center gap-2 md:pr-1">
            <button class="hidden md:inline-block bg-violet-600 hover:bg-violet-700 text-white px-4 md:px-6 py-2 md:py-3 rounded-full text-xs md:text-sm transition cursor-pointer" >
                Get Template
            </button>

<div class="flex flex-wrap items-center justify-center gap-2 pl-2 pr-4 py-1.5 mt-30 rounded-full bg-white/50 border border-white">
        <div class="relative flex size-3.5 items-center justify-center">
            <span class="absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75 animate-ping duration-300"></span>
            <span class="relative inline-flex size-2 rounded-full bg-green-600"></span>
        </div>
        <p class="text-sm text-black/60">Join 12,450+ brands growing with us</p>
    </div>

<h1 class="text-4xl md:text-[66px]/19 text-center max-w-2xl mt-8 text-gray-800 bg-clip-text leading-tight font-medium">Websites built to perform beautifully.</h1>
    <p class="text-sm text-gray-600 text-center max-w-[630px] mt-4">
        We design high-impact websites that convert and scale. From sleek interfaces to full stack experiences, we bring your brand to life online.
    </p>

<div class="flex gap-3 mt-10">
        <button class="bg-violet-600 hover:bg-violet-700 text-white text-xs md:text-sm px-6 py-3 rounded-lg transition cursor-pointer">Get Started Now</button>
        <button class="bg-white hover:bg-white/5 border border-violet-400 text-gray-600 text-xs md:text-sm px-5 py-3 rounded-lg transition cursor-pointer">
            Book a demo
        </button>
    </div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-8 py-18 max-w-[930px] w-full">
        <div class="text-center">
            <h2 class="font-medium text-2xl md:text-3xl text-gray-800">20+</h2>
            <p class="text-xs md:text-sm text-gray-500">Years Experience</p>
        </div>
        <div class="text-center">
            <h2 class="font-medium text-2xl md:text-3xl text-gray-800">12k+</h2>
            <p class="text-xs md:text-sm text-gray-500">Projects Completed</p>
        </div>
        <div class="text-center">
            <h2 class="font-medium text-2xl md:text-3xl text-gray-800">5k+</h2>
            <p class="text-xs md:text-sm text-gray-500">Happy Customers</p>
        </div>
        <div class="text-center">
            <h2 class="font-medium text-2xl md:text-3xl text-gray-800">5+</h2>
            <p class="text-xs md:text-sm text-gray-500">Countries</p>
        </div>
    </div>
</section>

function openMenu() {
        menu.classList.remove('max-md:hidden');
        menu.classList.add('max-md:flex');
    }

function closeMenu() {
        menu.classList.remove('max-md:flex');
        menu.classList.add('max-md:hidden');
    }

openMenuBtn.addEventListener('click', openMenu);
    closeMenuBtn.addEventListener('click', closeMenu);
    menuItems.forEach((item) => {
        item.addEventListener('click', closeMenu);
    });
</script>

Related Examples

Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.7k
404 Page Not Found

Author:
KULDEEP

8 months ago

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

Author:
Lekhraj Ghimire

8 months ago

841
Snake Game tailwind
snake game

Author:
QQ-VVN

9 months ago

904
Live Chat Component using Tailwind Alpine JS
Live Chat Component using Tailwind Alpine JS

Author:
Ahita Bisma Adlula

1 year ago

727
nft card
nft card

Author:
5upreme505

1 year ago

1.8k
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

2 years ago

9.1k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

10 months ago

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

Author:
Muhammad Umair Arshad

11 months ago

1.3k
hello world
by salvator

Author:
Anonymous

9 months ago

572
Privacy policy page template

Author:
Anonymous

1 year ago

3.1k
Stacked Checkboxes

Author:
kishan pc

1 year ago

3.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components