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

Contact Us / Enquiry-form Responsive

Author:
KULDEEP

7 months ago

1.2k
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

Author:
nejaa badr

1 year ago

1.6k
Download App Buttons
Ready-to-use Apple App Store and Google Play Store download buttons with official branding and styling

Author:
Musawer Shah

3 months ago

460
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.1k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

9 months ago

1.4k
Login AND Signup
login and signup

Author:
Uwera Dorcas

8 months ago

781
Resizable container
Resizable container

Author:
Ganesh Salunke

1 month ago

33
Giftcard grid

Author:
ariaw

5 months ago

431
Forgot Password
Forgot Password

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

103
Linear infinite brand scrolling with hover effect
Beautiful lineat brand scrolling partner with hover effect

Author:
Walid Ahmad

1 year ago

2.5k
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.6k
magic card
by salvator

Author:
Baraka Salvator

8 months ago

930

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components