card slider tailwind

Card Slider with Tailwind CSS

Table of Contents

Introduction of Card Slider Tailwind Css


Today we are going to create a Card Slider Tailwind Css with the help of HTML and Tailwind CSS, in which there will be different cards and one card will be covered with another card. When the user clicks on the card they want, that card will come with a sliding effect. This card contains some information; for example, you can add data to it.
Now let’s start making this card slider together with the help of the simple code of HTML and Tailwind CSS step by step to understand it completely without any doubt. If it occurs, then you can directly contact us through the contact details given in the footer of the page.


HTML


First, we will create the structure of the Card Slider in Tailwind Css with the help of HTML. In this card, there will be a parent div in which all the cards will be created, and then some child divs for cards. There will be a total 4-5 child divs for cards in it. We will write the content of the card, like the title of the card, in the heading tag, and some bit of information just for the intro. in a paragraph tag and a button to get more knowledge about the topic. If anyone wants to know about that topic, then they can.

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://kit.fontawesome.com/0f01d8d2a0.js" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
    <div class="relative font-inter antialiased">

        <main class="relative min-h-screen flex flex-col justify-center bg-slate-900 overflow-hidden">
            <div class="w-full max-w-5xl mx-auto px-4 md:px-6 py-24">
    
                <!-- Card slider  -->
                <section class="px-12">
                    <div class="max-w-lg mx-auto relative">
        
                        <input id="article-01" type="radio" name="slider" class="sr-only peer/01">
                        <input id="article-02" type="radio" name="slider" class="sr-only peer/02">
                        <input id="article-03" type="radio" name="slider" class="sr-only peer/03" checked>
                        <input id="article-04" type="radio" name="slider" class="sr-only peer/04">
                        <input id="article-05" type="radio" name="slider" class="sr-only peer/05">
        
                        <div class="
                            absolute inset-0 scale-[67.5%] z-20 transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)]
                            peer-focus-visible/01:[&_article]:ring
                            peer-focus-visible/01:[&_article]:ring-indigo-300
                            peer-checked/01:relative
                            peer-checked/01:z-50
                            peer-checked/01:translate-x-0
                            peer-checked/01:scale-100
                            peer-checked/01:[&>label]:pointer-events-none
                            peer-checked/02:-translate-x-20
                            peer-checked/02:scale-[83.75%]
                            peer-checked/02:z-40
                            peer-checked/03:-translate-x-40
                            peer-checked/03:z-30
                            peer-checked/04:-translate-x-40                    
                            peer-checked/04:opacity-0
                            peer-checked/05:-translate-x-40
                        ">
                            <label class="absolute inset-0" for="article-01"><span class="sr-only">Focus on the big picture</span></label>
                            <article class="bg-white p-6 rounded-lg shadow-2xl">
                                <header class="mb-2">
                                    <img class="inline-flex rounded-full shadow mb-3" src="https://cruip-tutorials.vercel.app/card-slider/icon.svg" width="44" height="44" alt="Icon" />
                                    <h1 class="text-xl font-bold text-slate-900">Focus on the big picture</h1>
                                </header>
                                <div class="text-sm leading-relaxed text-slate-500 space-y-4 mb-2">
                                    <p>
                                        Many desktop publishing packages and web page editors now use Pinky as their default model text, and a search for more variants will uncover many web sites still in their infancy.
                                    </p>
                                    <p>
                                        All the generators tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
                                    </p>
                                </div>
                                <footer class="text-right">
                                    <a class="text-sm font-medium text-indigo-500 hover:underline" href="#0">Read more -></a>
                                </footer>
                            </article>
                        </div>
        
                        <div class="
                            absolute inset-0 scale-[67.5%] z-20 transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)]
                            peer-focus-visible/02:[&_article]:ring
                            peer-focus-visible/02:[&_article]:ring-indigo-300                        
                            peer-checked/01:translate-x-20
                            peer-checked/01:scale-[83.75%]
                            peer-checked/01:z-40
                            peer-checked/02:relative
                            peer-checked/02:z-50
                            peer-checked/02:translate-x-0
                            peer-checked/02:scale-100
                            peer-checked/02:[&>label]:pointer-events-none
                            peer-checked/03:-translate-x-20
                            peer-checked/03:scale-[83.75%]
                            peer-checked/03:z-40
                            peer-checked/04:-translate-x-40
                            peer-checked/04:z-30
                            peer-checked/05:-translate-x-40 
                            peer-checked/05:opacity-0
                        ">
                            <label class="absolute inset-0" for="article-02"><span class="sr-only">Focus on the big picture</span></label>
                            <article class="bg-white p-6 rounded-lg shadow-2xl">
                                <header class="mb-2">
                                    <img class="inline-flex rounded-full shadow mb-3" src="https://cruip-tutorials.vercel.app/card-slider/icon.svg" width="44" height="44" alt="Icon" />
                                    <h1 class="text-xl font-bold text-slate-900">Focus on the big picture</h1>
                                </header>
                                <div class="text-sm leading-relaxed text-slate-500 space-y-4 mb-2">
                                    <p>
                                        Many desktop publishing packages and web page editors now use Pinky as their default model text, and a search for more variants will uncover many web sites still in their infancy.
                                    </p>
                                    <p>
                                        All the generators tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
                                    </p>
                                </div>
                                <footer class="text-right">
                                    <a class="text-sm font-medium text-indigo-500 hover:underline" href="#0">Read more -></a>
                                </footer>
                            </article>
                        </div>
        
                        <div class="
                            absolute inset-0 scale-[67.5%] z-20 transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)]
                            peer-focus-visible/03:[&_article]:ring
                            peer-focus-visible/03:[&_article]:ring-indigo-300                          
                            peer-checked/01:translate-x-40
                            peer-checked/01:z-30
                            peer-checked/02:translate-x-20
                            peer-checked/02:scale-[83.75%]
                            peer-checked/02:z-40
                            peer-checked/03:relative
                            peer-checked/03:z-50
                            peer-checked/03:translate-x-0
                            peer-checked/03:scale-100
                            peer-checked/03:[&>label]:pointer-events-none
                            peer-checked/04:-translate-x-20
                            peer-checked/04:scale-[83.75%]
                            peer-checked/04:z-40
                            peer-checked/05:-translate-x-40
                            peer-checked/05:z-30                  
                        ">
                            <label class="absolute inset-0" for="article-03"><span class="sr-only">Focus on the big picture</span></label>
                            <article class="bg-white p-6 rounded-lg shadow-2xl">
                                <header class="mb-2">
                                    <img class="inline-flex rounded-full shadow mb-3" src="https://cruip-tutorials.vercel.app/card-slider/icon.svg" width="44" height="44" alt="Icon" />
                                    <h1 class="text-xl font-bold text-slate-900">Focus on the big picture</h1>
                                </header>
                                <div class="text-sm leading-relaxed text-slate-500 space-y-4 mb-2">
                                    <p>
                                        Many desktop publishing packages and web page editors now use Pinky as their default model text, and a search for more variants will uncover many web sites still in their infancy.
                                    </p>
                                    <p>
                                        All the generators tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
                                    </p>
                                </div>
                                <footer class="text-right">
                                    <a class="text-sm font-medium text-indigo-500 hover:underline" href="#0">Read more -></a>
                                </footer>
                            </article>
                        </div>
        
                        <div class="
                            absolute inset-0 scale-[67.5%] z-20 transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)]
                            peer-focus-visible/04:[&_article]:ring
                            peer-focus-visible/04:[&_article]:ring-indigo-300                          
        
                            peer-checked/01:translate-x-40 
                            peer-checked/01:opacity-0
                            
                            peer-checked/02:translate-x-40
                            peer-checked/02:z-30
                            
                            peer-checked/03:translate-x-20
                            peer-checked/03:scale-[83.75%]
                            peer-checked/03:z-40
        
                            peer-checked/04:relative
                            peer-checked/04:z-50
                            peer-checked/04:translate-x-0
                            peer-checked/04:scale-100
                            peer-checked/04:[&>label]:pointer-events-none
                            
                            peer-checked/05:-translate-x-20
                            peer-checked/05:scale-[83.75%]
                            peer-checked/05:z-40
                        ">
                            <label class="absolute inset-0" for="article-04"><span class="sr-only">Focus on the big picture</span></label>
                            <article class="bg-white p-6 rounded-lg shadow-2xl">
                                <header class="mb-2">
                                    <img class="inline-flex rounded-full shadow mb-3" src="https://cruip-tutorials.vercel.app/card-slider/icon.svg" width="44" height="44" alt="Icon" />
                                    <h1 class="text-xl font-bold text-slate-900">Focus on the big picture</h1>
                                </header>
                                <div class="text-sm leading-relaxed text-slate-500 space-y-4 mb-2">
                                    <p>
                                        Many desktop publishing packages and web page editors now use Pinky as their default model text, and a search for more variants will uncover many web sites still in their infancy.
                                    </p>
                                    <p>
                                        All the generators tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
                                    </p>
                                </div>
                                <footer class="text-right">
                                    <a class="text-sm font-medium text-indigo-500 hover:underline" href="#0">Read more -></a>
                                </footer>
                            </article>
                        </div>  
                        
                        <div class="
                            absolute inset-0 scale-[67.5%] z-20 transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)]
                            peer-focus-visible/05:[&_article]:ring
                            peer-focus-visible/05:[&_article]:ring-indigo-300                          
                            peer-checked/01:translate-x-40 
                            peer-checked/02:translate-x-40 
                            peer-checked/02:opacity-0
                            peer-checked/03:translate-x-40
                            peer-checked/03:z-30
                            peer-checked/04:translate-x-20
                            peer-checked/04:scale-[83.75%]
                            peer-checked/04:z-40
                            peer-checked/05:relative
                            peer-checked/05:z-50
                            peer-checked/05:translate-x-0
                            peer-checked/05:scale-100
                            peer-checked/05:[&>label]:pointer-events-none
                        ">
                            <label class="absolute inset-0" for="article-05"><span class="sr-only">Focus on the big picture</span></label>
                            <article class="bg-white p-6 rounded-lg shadow-2xl">
                                <header class="mb-2">
                                    <img class="inline-flex rounded-full shadow mb-3" src="https://cruip-tutorials.vercel.app/card-slider/icon.svg" width="44" height="44" alt="Icon" />
                                    <h1 class="text-xl font-bold text-slate-900">Focus on the big picture</h1>
                                </header>
                                <div class="text-sm leading-relaxed text-slate-500 space-y-4 mb-2">
                                    <p>
                                        Many desktop publishing packages and web page editors now use Pinky as their default model text, and a search for more variants will uncover many web sites still in their infancy.
                                    </p>
                                    <p>
                                        All the generators tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
                                    </p>
                                </div>
                                <footer class="text-right">
                                    <a class="text-sm font-medium text-indigo-500 hover:underline" href="#0">Read more -></a>
                                </footer>
                            </article>
                        </div>                  
                    </div>
                </section>
                <!-- End: Card slider  -->
    
            </div>
    
        </main>
    
        
    
       
    
    </div>
</body>
</html>


Tailwind


After making the structure of this Card Slider Tailwind Css. We will now make it responsive with the help of Tailwind ( this is the framework of CSS used to give styling to the html elements. Make the website responsive attached to an HTML file, starting with the script and link tag). We are using Tailwind because it makes it easy to style and make the website responsive using CSS. To do this, we will first make the background black and take the card to the center of the screen.


Now we will design the Card Slider in Tailwind Css in which we will give the border radius. Adjust the size and position of all the cards. Then we will place one card behind the other, and all the cards will be hidden. Only a few parts will be visible when the user hovers on one particular card, then that card will come to the front with sliding and the rest of the cards will hide behind that card. At the end, we will also make it responsive to work without any overlapping on different sizes of screens.

@tailwind base;
@tailwind components;
@tailwind utilities;

OutPut of Card Slider Tailwind Css


Finally, we made the Card Slider Tailwind Css by following the easy code of HTML and Tailwind step by step. You can use it in your website to store some data in a card, or you can practice by making such projects to increase your knowledge. If you want the source code, then click on the button given below.

card slider tailwind


For more explanation of Card Slider in Tailwind Css, click on the link given below to watch the video.

You can also check Hover Image change

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow Us

Latest Posts

Quick Links