Tailwind Components in Vista library

Framework

UI Library

Components

Tailwind Component #1

Tailwind CSS

Vista

<section class="bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="py-5 border-b border-white border-opacity-10">
            <div class="flex items-center justify-between">
                <a href="#">
                    <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                </a>
                <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                </div>
                <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-pink-500 transition duration-200">
                    <span class="text-sm font-medium">Sign in</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="56" height="56" rx="28" fill="white"></rect>
                        <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Vista bookkeeping hero with dashboard preview

A dark-to-pink gradient hero section for a bookkeeping product, featuring a centered headline, a short subtitle, a Get started call to action, and a dashboard preview card showing accounts and overdue bills. Floating pink feature tags and avatar circles surround the headline.

Tailwind Component #2

Tailwind CSS

Vista

<section class="bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="py-5 border-b border-white border-opacity-10">
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between">
                    <a href="#">
                        <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                    </a>
                    <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                    </div>
                    <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-pink-500 transition duration-200">
                        <span class="text-sm font-medium">Sign in</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                    <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                        <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="56" height="56" rx="28" fill="white"></rect>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bookkeeping Tools Hero with Dashboard Preview

A full-width landing page hero with a top navigation bar, a large two-line headline, supporting subtext, and a 'Get started for free' call to action. Below the copy, a dark dashboard mockup displays account balances and an overdue bills table as an illustrative product preview.

Tailwind Component #3

Tailwind CSS

Vista

<section class="relative bg-darkPink-900 overflow-hidden" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="relative z-50 py-5 border-b border-white border-opacity-10">
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between">
                    <a href="#">
                        <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                    </a>
                    <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                    </div>
                    <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-pink-500 transition duration-200">
                        <span class="text-sm font-medium">Sign in</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                    <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                        <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="56" height="56" rx="28" fill="white"></rect>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #4

Tailwind CSS

Vista

<section class="bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="py-5 border-b border-white border-opacity-10">
            <div class="flex items-center justify-between">
                <a href="#">
                    <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                </a>
                <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                </div>
                <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-pink-500 transition duration-200">
                    <span class="text-sm font-medium">Sign in</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="56" height="56" rx="28" fill="white"></rect>
                        <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #5

Tailwind CSS

Vista

<section class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="py-5 border-b border-white border-opacity-10">
            <div class="flex items-center justify-between">
                <a href="#">
                    <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                </a>
                <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                </div>
                <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-pink-500 transition duration-200">
                    <span class="text-sm font-medium">Sign in</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="56" height="56" rx="28" fill="white"></rect>
                        <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #6

Tailwind CSS

Vista

<section class="bg-gradient-to-b from-darkBlue-900 via-blue-700 to-blue-400" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="py-5 border-b border-white border-opacity-10">
            <div class="flex items-center justify-between">
                <a href="#">
                    <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                </a>
                <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                </div>
                <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-blue-800 transition duration-200">
                    <span class="text-sm font-medium">Sign in</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="56" height="56" rx="28" fill="white"></rect>
                        <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #7

Tailwind CSS

Vista

<section class="bg-gradient-to-b from-darkBlue-900 via-blue-700 to-blue-400" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="py-5 border-b border-white border-opacity-10">
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between">
                    <a href="#">
                        <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                    </a>
                    <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                    </div>
                    <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-blue-800 transition duration-200">
                        <span class="text-sm font-medium">Sign in</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                    <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                        <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="56" height="56" rx="28" fill="white"></rect>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #8

Tailwind CSS

Vista

<section class="relative bg-darkBlue-900 overflow-hidden" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="relative z-50 py-5 border-b border-white border-opacity-10">
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between">
                    <a href="#">
                        <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                    </a>
                    <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                    </div>
                    <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-blue-800 transition duration-200">
                        <span class="text-sm font-medium">Sign in</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                    <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                        <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="56" height="56" rx="28" fill="white"></rect>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #9

Tailwind CSS

Vista

<section class="bg-gradient-to-b from-darkBlue-900 via-blue-700 to-blue-400" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="py-5 border-b border-white border-opacity-10">
            <div class="flex items-center justify-between">
                <a href="#">
                    <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                </a>
                <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                </div>
                <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-blue-800 transition duration-200">
                    <span class="text-sm font-medium">Sign in</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="56" height="56" rx="28" fill="white"></rect>
                        <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #10

Tailwind CSS

Vista

<section class="bg-gradient-to-t from-darkBlue-900 via-blue-700 to-blue-400" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="py-5 border-b border-white border-opacity-10">
            <div class="flex items-center justify-between">
                <a href="#">
                    <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                </a>
                <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                </div>
                <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-blue-800 transition duration-200">
                    <span class="text-sm font-medium">Sign in</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="56" height="56" rx="28" fill="white"></rect>
                        <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #11

Tailwind CSS

Vista

<section class="bg-gradient-to-t from-green-400 via-green-500 to-darkGreen-900" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="py-5 border-b border-white border-opacity-10">
            <div class="flex items-center justify-between">
                <a href="#">
                    <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                </a>
                <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                </div>
                <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-green-500 transition duration-200">
                    <span class="text-sm font-medium">Sign in</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="56" height="56" rx="28" fill="white"></rect>
                        <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #12

Tailwind CSS

Vista

<section class="bg-gradient-to-t from-green-400 via-green-500 to-darkGreen-900" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="py-5 border-b border-white border-opacity-10">
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between">
                    <a href="#">
                        <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                    </a>
                    <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                    </div>
                    <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-green-500 transition duration-200">
                        <span class="text-sm font-medium">Sign in</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                    <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                        <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="56" height="56" rx="28" fill="white"></rect>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #13

Tailwind CSS

Vista

<section class="relative bg-darkGreen-900 overflow-hidden" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="relative z-50 py-5 border-b border-white border-opacity-10">
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between">
                    <a href="#">
                        <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                    </a>
                    <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                        <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                    </div>
                    <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-green-500 transition duration-200">
                        <span class="text-sm font-medium">Sign in</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                    <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                        <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="56" height="56" rx="28" fill="white"></rect>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #14

Tailwind CSS

Vista

<section class="bg-gradient-to-t from-green-400 via-green-500 to-darkGreen-900" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="py-5 border-b border-white border-opacity-10">
            <div class="flex items-center justify-between">
                <a href="#">
                    <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                </a>
                <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                </div>
                <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-green-500 transition duration-200">
                    <span class="text-sm font-medium">Sign in</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="56" height="56" rx="28" fill="white"></rect>
                        <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #15

Tailwind CSS

Vista

<section class="bg-gradient-to-b from-green-400 via-green-500 to-darkGreen-900" x-data="{ mobileNavOpen: false }">
    <div class="container mx-auto px-4">
        <nav class="py-5 border-b border-white border-opacity-10">
            <div class="flex items-center justify-between">
                <a href="#">
                    <img src="vista-assets/images/logos/vista-logo-dark.svg" alt="">
                </a>
                <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                    <a href="#" class="px-3 py-2 rounded-full text-black text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                    <a href="#" class="px-3 py-2 rounded-full text-black text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                    <a href="#" class="px-3 py-2 rounded-full text-black text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                    <a href="#" class="px-3 py-2 rounded-full text-black text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                    <a href="#" class="px-3 py-2 rounded-full text-black text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                </div>
                <a href="#" class="hidden lg:flex items-center gap-2 text-black hover:text-green-700 transition duration-200">
                    <span class="text-sm font-medium">Sign in</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="56" height="56" rx="28" fill="white"></rect>
                        <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #16

Tailwind CSS

Vista

<section class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 pt-32 pb-96 relative overflow-hidden">
    <div class="container mx-auto px-4">
        <h1 class="font-heading text-white text-center text-4xl md:text-5xl font-bold mb-4">Optimize your finances now</h1>
        <p class="text-white text-center text-lg mb-10">Take control of your money. Optimize your finances for a brighter tomorrow!</p>
        <div class="text-center">
            <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full shadow-pink hover:shadow-none focus:shadow-none">
                <div class="absolute inset-0 bg-gradient-to-b from-pink-400 to-pink-500 group-hover:from-white group-focus:from-white group-hover:to-transparent group-focus:to-white group-hover:opacity-40 group-focus:opacity-0 rounded-full"></div>
                <div class="relative z-50 flex items-center py-3 px-5 bg-pink-500 group-hover:bg-pink-600 group-focus:bg-pink-600 rounded-full transition duration-200">
                    <p class="mr-3 text-white">Get Started</p>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </div>
            </a>
        </div>
    </div>
    <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 object-cover" style="height:300px" src="vista-assets/images/cta/vista-text.svg" alt="">
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Finance Hero Section with Pink Gradient and CTA

A centered hero section with a bold white heading, supporting subtitle, and a pink pill-shaped Get Started call-to-action button over a pink-to-dark gradient background. A large outlined decorative lettering is partially visible at the bottom, cropped by the frame.

Tailwind Component #17

Tailwind CSS

Vista

<section class="bg-darkPink-900 pr-6 pl-6 lg:pl-28 py-6">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/2 p-4">
            <div class="flex flex-col justify-center h-full max-w-md mx-auto">
                <h1 class="font-heading text-white text-4xl font-bold mb-4">Login</h1>
                <p class="text-gray-400 mb-8">
                    <span>Don’t have an account?</span>
                    <a href="#" class="text-white font-bold hover:text-opacity-70 transition duration-200">Sign up</a>
                </p>
                <form action="">
                    <label for="email" class="block text-sm mb-2 text-white font-medium">Email</label>
                    <input type="email" id="email" class="px-4 py-3 mb-6 rounded-full border border-white border-opacity-10 bg-white bg-opacity-5 text-sm placeholder-white placeholder-opacity-50 text-white focus:border-white focus:border focus:border-opacity-50 transition duration-200 outline-none w-full" placeholder="john@email.com">
                    <label for="password" class="block text-sm mb-2 text-white font-medium">Password</label>
                    <div class="rounded-full border border-white border-opacity-10 bg-white bg-opacity-5 px-4 py-3 flex items-center mb-8" x-data="{ visible: false }">
                        <input type="password" :type="visible ? 'text' : 'password'" id="password" class="flex-1 bg-transparent text-sm placeholder-white placeholder-opacity-50 text-white transition duration-200 outline-none" placeholder="Enter password">
                        <svg x-on:click="visible = !visible" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <g opacity="0.5">
                              <path d="M13.7445 6.36839L13.7446 6.36857C14.0157 6.79424 14.1663 7.3838 14.1663 7.99912C14.1663 8.61458 14.0157 9.20179 13.7454 9.62345L13.7447 9.62455C13.0069 10.7821 12.1122 11.6786 11.1304 12.2878C10.1493 12.8899 9.08596 13.2066 7.99967 13.2066C5.83421 13.2066 3.72502 11.9415 2.25517 9.62537L2.25473 9.62468C1.98347 9.1988 1.83301 8.61081 1.83301 7.99662C1.83301 7.3825 1.98344 6.79456 2.25465 6.36869C2.99243 5.21114 3.88718 4.31462 4.86891 3.70547C5.85008 3.10332 6.91339 2.78662 7.99967 2.78662C10.1646 2.78662 12.2742 4.05784 13.7445 6.36839ZM4.80634 7.99995C4.80634 9.76196 6.22939 11.1933 7.99967 11.1933C9.76996 11.1933 11.193 9.76196 11.193 7.99995C11.193 6.23795 9.76996 4.80662 7.99967 4.80662C6.22939 4.80662 4.80634 6.23795 4.80634 7.99995Z" fill="white" stroke="white" style="fill:white;fill-opacity:1;stroke:white;stroke-opacity:1;"></path>
                              <path d="M7.99961 6.09326C6.95294 6.09326 6.09961 6.94659 6.09961 7.99993C6.09961 9.04659 6.95294 9.89993 7.99961 9.89993C9.04628 9.89993 9.90628 9.04659 9.90628 7.99993C9.90628 6.95326 9.04628 6.09326 7.99961 6.09326Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                            </g>
                        </svg>
                    </div>
                    <button type="submit" class="group relative inline-block w-full mb-6 p-0.5 font-semibold overflow-hidden rounded-full shadow-pink hover:shadow-none focus:shadow-none">
                        <div class="absolute inset-0 bg-gradient-to-b from-pink-400 to-pink-500 rounded-full"></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Split-Screen Login Form with App Preview

A dark split-screen authentication component with a login form on the left (email, password, Log in button, and Google sign-in) and a pink gradient panel on the right showing an illustrative dashboard screenshot with a user-count badge. The form is the outer component; the dashboard is an illustrative preview.

Tailwind Component #18

Tailwind CSS

Vista

<section class="bg-darkPink-900 pt-24 pb-56">
    <div class="container mx-auto px-4">
        <div class="pb-24 mb-24 border-b border-white border-opacity-20 border-dashed">
            <div class="flex items-start justify-between flex-wrap gap-6">
                <div class="order-last sm:order-first">
                    <h1 class="font-heading text-white text-4xl md:text-6xl font-bold mb-6">Careers at Vista</h1>
                    <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full">
                        <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div>
                        <div class="relative z-50 flex items-center py-2 px-4 bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200">
                            <p class="text-pinkSecondary-900">View Openings</p>
                        </div>
                    </a>
                </div>
                <div class="relative">
                    <div class="absolute left-0 top-0 bg-pink-500 blur-xl filter opacity-50 h-full w-full"></div>
                    <img class="h-16 relative z-50" src="vista-assets/images/logos/vista-logo-small.svg" alt="">
                </div>
            </div>
        </div>
        <h2 class="font-heading text-white text-4xl font-bold mb-4">Benefits</h2>
        <p class="text-white text-opacity-70 mb-16 max-w-2xl">Our team receives support, enjoys ample vacation time, opportunities to give back, and the financial resources they need to thrive both inside and outside of work.</p>
        <div class="flex flex-wrap -m-4 lg:mb-16">
            <div class="w-full lg:w-1/3 p-4">
                <div class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Careers page with benefits grid, hiring process, and open roles list

A dark-themed careers page for a company, featuring a hero heading with a View Openings button, a six-card benefits grid with icons, a numbered four-step hiring process, and grouped open role rows with location and chevron indicators. The layout is a vertical stack of sections with distinct content blocks.

Tailwind Component #19

Tailwind CSS

Vista

<section class="bg-darkPink-900 pt-24 pb-40">
    <div class="container mx-auto px-4">
        <h1 class="font-heading text-white text-5xl font-bold mb-6">FAQ</h1>
        <div class="flex flex-wrap gap-3 mb-16">
            <p class="text-white">Still have more questions?</p>
            <a href="#" class="inline-flex items-center gap-2 text-pink-500 hover:text-pink-600 transition duration-200">
                <span class="font-bold">Talk to us</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
        <div class="flex flex-wrap -mx-4">
            <div class="w-full lg:w-1/2 px-4">
                <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full py-6 border-t border-b border-white border-opacity-10">
                    <div class="flex items-center justify-between gap-4">
                        <p class="text-white text-lg font-semibold text-left">What is Vista?</p>
                        <span :class="{ 'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </span>
                    </div>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark FAQ Section with Two-Column Accordion Questions

A dark-background FAQ section with a bold FAQ heading, a 'Talk to us' pink link, and two columns of expandable question rows marked by chevron icons. The collapsible rows are separated by thin dividers, presenting common questions for visitors.

Tailwind Component #20

Tailwind CSS

Vista

<section class="relative bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900 pt-24 pb-8" style="height:750px">
    <div class="container mx-auto px-4">
        <div class="flex items-center flex-wrap justify-between gap-8">
            <ul class="flex flex-wrap gap-6">
                <li>
                    <a href="#" class="text-white hover:text-opacity-70 transition duration-200">Features</a>
                </li>
                <li>
                    <a href="#" class="text-white hover:text-opacity-70 transition duration-200">How it works</a>
                </li>
                <li>
                    <a href="#" class="text-white hover:text-opacity-70 transition duration-200">Pricing</a>
                </li>
                <li>
                    <a href="#" class="text-white hover:text-opacity-70 transition duration-200">About</a>
                </li>
                <li>
                    <a href="#" class="text-white hover:text-opacity-70 transition duration-200">Blog</a>
                </li>
                <li>
                    <a href="#" class="text-white hover:text-opacity-70 transition duration-200">FAQs</a>
                </li>
                <li>
                    <a href="#" class="text-white hover:text-opacity-70 transition duration-200">Contact</a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Vista Site Footer with Social Links and Gradient Wordmark

A full-width dark-to-pink gradient footer with a horizontal row of text navigation links and social media icons at the top, and a large faded Vista wordmark across the middle. A small copyright line sits at the bottom center.

Tailwind Components by Shuffle

Browse 306 of ready-made components in Tailwind and Vista library. They are divided into UI libraries that our professional designers designed. Each of them has a resource of many variations of different types of components. Under each of them, there is a clear code created by our team of developers.

All elements available in the editor are fully responsive. You will get full access to them by subscribing to our drag and drop editor.

Try the demo for free!

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Components – Vista Library

Framework

UI Library

Components

Tailwind Component #1

Get the code for 13,400+ components

Vista bookkeeping hero with dashboard preview

Tailwind Component #2

Get the code for 13,400+ components

Bookkeeping Tools Hero with Dashboard Preview

Tailwind Component #3

Get the code for 13,400+ components

Tailwind Component #4

Get the code for 13,400+ components

Tailwind Component #5

Get the code for 13,400+ components

Tailwind Component #6

Get the code for 13,400+ components

Tailwind Component #7

Get the code for 13,400+ components

Tailwind Component #8

Get the code for 13,400+ components

Tailwind Component #9

Get the code for 13,400+ components

Tailwind Component #10

Get the code for 13,400+ components

Tailwind Component #11

Get the code for 13,400+ components

Tailwind Component #12

Get the code for 13,400+ components

Tailwind Component #13

Get the code for 13,400+ components

Tailwind Component #14

Get the code for 13,400+ components

Tailwind Component #15

Get the code for 13,400+ components

Tailwind Component #16

Get the code for 13,400+ components

Finance Hero Section with Pink Gradient and CTA

Tailwind Component #17

Get the code for 13,400+ components

Split-Screen Login Form with App Preview

Tailwind Component #18

Get the code for 13,400+ components

Careers page with benefits grid, hiring process, and open roles list

Tailwind Component #19

Get the code for 13,400+ components

Dark FAQ Section with Two-Column Accordion Questions

Tailwind Component #20

Get the code for 13,400+ components

Vista Site Footer with Social Links and Gradient Wordmark

Tailwind Components by Shuffle

The easiest way to create beautiful websites

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support