Tailwind credit card design

Create credit card designs in Tailwind CSS

Here is a collection of beautiful credit card designs in tailwind CSS. All the designs are crafted with HTML and Tailwind CSS only There is no JavaScript required.

It is important to add the tailwind to your project. You can play with the CDN or Tailwind CLI.

Also read: How to center a DIV in tailwind CSS?

<script src="https://cdn.tailwindcss.com"></script>

Tailwind CSS works by looking for class names in all of your HTML files, JavaScript components, and other templates, then generating the styles and writing them to a static CSS file.


Use the Play CDN to try Tailwind in your browser without having to install anything. The Play CDN is intended only for development and is not the ideal option for production.

Orange gradient master credit card

credit card designs in Tailwind CSS

Code

Download the code


 <div class="w-96 h-56 m-5 bg-red-100 rounded-xl relative text-white shadow-2xl bg-gradient-to-tr from-orange-400 to-orange-600 transition-transform transform hover:scale-105 cursor-pointer">
        <div class="w-full px-8 absolute top-8 ">
            <div class="flex justify-between">
                <div class="">
                    <p class="font-light">
                        Name
                       
                    <p class="font-medium tracking-widest">
                        John Doe
                    </p>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="5rem" viewBox="0 0 150 100">
                    <rect x="60.4117" y="25.6968" width="30" height="55" style="fill:#f75b00" />
                    <path
                        d="M382.20839,306a35.9375,35.9375,0,0,1,13.7499-28.3032,36,36,0,1,0,0,56.6064A35.938,35.938,0,0,1,382.20839,306Z"
                        transform="translate(-319.79649 -252)" style="fill: #e9172f" />
                    <path
                        d="M454.20349,306a35.99867,35.99867,0,0,1-58.2452,28.3032,36.00518,36.00518,0,0,0,0-56.6064A35.99867,35.99867,0,0,1,454.20349,306Z"
                        transform="translate(-319.79649 -252)" style="fill: #fa9c10" />
                    <path
                        d="M450.76889,328.3077v-1.1589h.4673v-.2361h-1.1901v.2361h.4675v1.1589Zm2.3105,0v-1.3973h-.3648l-.41959.9611-.41971-.9611h-.365v1.3973h.2576v-1.054l.3935.9087h.2671l.39351-.911v1.0563Z"
                        transform="translate(-319.79649 -252)" style="fill: #f79e1b" />
                    </g>
                    </g>
                </svg>
            </div>
            <div class="pt-1">
                <p class="font-light">
                    Card Number
                    
                <p class="font-medium tracking-more-wider">
                    5555&nbsp;&nbsp;&nbsp;5948&nbsp;&nbsp;&nbsp;1234&nbsp;&nbsp;&nbsp;5678
                </p>
            </div>
            <div class="pt-6 pr-6">
                <div class="flex justify-between">
                    <div class="">
                        <p class="font-light text-xs">
                            Valid
                           
                        <p class="font-medium tracking-wider text-sm">
                            11/15
                        </p>
                    </div>
                    <div class="">
                        <p class="font-light text-xs text-xs">
                            Expiry
                          
                        <p class="font-medium tracking-wider text-sm">
                            03/25
                        </p>
                    </div>

                    <div class="">
                        <p class="font-light text-xs">
                            CVV
                            
                        <p class="font-bold tracking-more-wider text-sm">
                            000
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>

Gray gradient credit card

Download the code

Code


<div class="w-96 h-56 m-5 bg-red-100 rounded-xl relative text-white shadow-2xl bg-gradient-to-tr from-gray-400 to-gray-900 transition-transform transform hover:scale-105 cursor-pointer">
        <div class="w-full px-8 absolute top-8 ">
            <div class="flex justify-between">
                <div class="">
                    <p class="font-light">
                        Name
                       
                    <p class="font-medium tracking-widest">
                        John Doe
                    </p>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="5rem" viewBox="0 0 150 100">
                    <rect x="60.4117" y="25.6968" width="30" height="55" style="fill:#f75b00" />
                    <path
                        d="M382.20839,306a35.9375,35.9375,0,0,1,13.7499-28.3032,36,36,0,1,0,0,56.6064A35.938,35.938,0,0,1,382.20839,306Z"
                        transform="translate(-319.79649 -252)" style="fill: #e9172f" />
                    <path
                        d="M454.20349,306a35.99867,35.99867,0,0,1-58.2452,28.3032,36.00518,36.00518,0,0,0,0-56.6064A35.99867,35.99867,0,0,1,454.20349,306Z"
                        transform="translate(-319.79649 -252)" style="fill: #fa9c10" />
                    <path
                        d="M450.76889,328.3077v-1.1589h.4673v-.2361h-1.1901v.2361h.4675v1.1589Zm2.3105,0v-1.3973h-.3648l-.41959.9611-.41971-.9611h-.365v1.3973h.2576v-1.054l.3935.9087h.2671l.39351-.911v1.0563Z"
                        transform="translate(-319.79649 -252)" style="fill: #f79e1b" />
                    </g>
                    </g>
                </svg>
            </div>
            <div class="pt-1">
                <p class="font-light">
                    Card Number
                    
                <p class="font-medium tracking-more-wider">
                    5555&nbsp;&nbsp;&nbsp;5948&nbsp;&nbsp;&nbsp;1234&nbsp;&nbsp;&nbsp;5678
                </p>
            </div>
            <div class="pt-6 pr-6">
                <div class="flex justify-between">
                    <div class="">
                        <p class="font-light text-xs">
                            Valid
                            
                        <p class="font-medium tracking-wider text-sm">
                            11/15
                        </p>
                    </div>
                    <div class="">
                        <p class="font-light text-xs text-xs">
                            Expiry
                           
                        <p class="font-medium tracking-wider text-sm">
                            03/25
                        </p>
                    </div>

                    <div class="">
                        <p class="font-light text-xs">
                            CVV
                           
                        <p class="font-bold tracking-more-wider text-sm">
                            123
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>

Black visa card design

Download the code

Code


 <div class="bg-gradient-to-tl m-5  from-gray-900 to-gray-600 text-white w-96 h-56 shadow-md p-6 rounded-xl shadow-md transition-transform transform cursor-pointer hover:scale-105">
        <div class="h-full flex flex-col justify-between">
            <div class="flex items-start justify-between space-x-4">
                <div class=" text-xl font-semibold tracking-tigh uppercase">
                    John Doe
                </div>

                <div class="inline-flex flex-col items-center justify-center">


                    <img src="https://www.infopediya.com/wp-content/uploads/2022/04/visa.png"
                        width="60" alt="logo">
                </div>
            </div>

            <div
                class="inline-block w-12 h-8 bg-gradient-to-tl from-yellow-200 to-yellow-100 rounded-md shadow-inner overflow-hidden">
                <div class="relative w-full h-full grid grid-cols-2 gap-1">
                    <div class="absolute border border-gray-900 rounded w-4 h-6 left-4 top-1"></div>
                    <div class="border-b border-r border-gray-900 rounded-br"></div>
                    <div class="border-b border-l border-gray-900 rounded-bl"></div>
                    <div class=""></div>
                    <div class=""></div>
                    <div class="border-t border-r border-gray-900 rounded-tr"></div>
                    <div class="border-t border-l border-gray-900 rounded-tl"></div>
                </div>
            </div>

            <div class="">
                <div class="text-xs font-semibold tracking-tight uppercase">
                    Expires
                </div>

                <div class="text-2xl font-semibold">
                    01/30
                </div>
            </div>
        </div>
    </div>

Cyan credit card

Download the code

credit card designs in Tailwind

code


 <div
        class="bg-gradient-to-tl m-5  from-cyan-900 to-cyan-500 font-semibold font-mono text-white w-96 h-56 shadow-md p-6 rounded-xl shadow-md transition-transform transform cursor-pointer hover:scale-105">
        <div class="h-full flex flex-col justify-between">
            <div class="flex items-start justify-between space-x-4">
                <div class=" text-xl font-semibold tracking-tigh uppercase">
                    John Doe
                </div>

                <div class="inline-flex flex-col items-center justify-center">


                    <img src="https://www.infopediya.com/wp-content/uploads/2022/04/visa.png" width="60" alt="logo">
                </div>
            </div>

            <div class="pt-1">
                <p class="font-light">
                    Card Number

                <p class="font-medium tracking-more-wider">
                    0000&nbsp;&nbsp;&nbsp;0000&nbsp;&nbsp;&nbsp;0000&nbsp;&nbsp;&nbsp;0000
                </p>
            </div>

            <div class="pt-6 pr-6">
                <div class="flex justify-between">
                    <div class="">
                        <p class="font-light text-xs">
                            Valid

                        <p class="font-medium tracking-wider text-sm">
                            11/15
                        </p>
                    </div>
                    <div class="">
                        <p class="font-light text-xs text-xs">
                            Expiry

                        <p class="font-medium tracking-wider text-sm">
                            03/25
                        </p>
                    </div>

                    <div class="">
                        <p class="font-light text-xs">
                            CVV

                        <p class="font-bold tracking-more-wider text-sm">
                            000
                        </p>
                    </div>
                </div>
            </div>


        </div>
    </div>