- Published on
How To Make A Story component With Tailwind CSS From Scratch
- What is Tailwind CSS?
- The Description of Story Component UI Component
- Why Use Tailwind CSS to Create a Story Component UI Component?
- The Preview of Story Component UI Component
- The Source Code of Story Component UI Component
- How to Create a Story Component with Tailwind CSS?
- Conclusion
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that allows developers to easily create responsive and customizable user interfaces. It provides a set of pre-defined CSS classes that can be used to style HTML elements without writing any custom CSS code. Tailwind CSS is gaining popularity among developers due to its simplicity and flexibility.
The Description of Story Component UI Component
A story component is a UI component that is commonly used in websites and applications to display a series of images or videos with captions. It is often used in news websites, social media platforms, and e-commerce websites to showcase products or events. A story component typically consists of a series of images or videos that are displayed in a slideshow format with captions and navigation buttons.
Why Use Tailwind CSS to Create a Story Component UI Component?
Tailwind CSS provides a set of pre-defined CSS classes that can be used to create a story component UI component without writing any custom CSS code. This makes it easy for developers to create a responsive and customizable story component that can be used in different types of websites and applications. Tailwind CSS also provides a wide range of utility classes that can be used to style different elements of the story component, such as the captions, navigation buttons, and background.
The Preview of Story Component UI Component
To create a story component with Tailwind CSS, we will use a set of pre-defined CSS classes to style the different elements of the component. The preview of the story component UI component is shown below:
Free download of the Story component's source code
The Source Code of Story Component UI Component
The source code of the story component UI component is shown below:
<section class="bg-black min-h-screen md:flex flex-col items-center justify-center">
<div class="pt-10 pb-10">
<h2 class="text-4xl font-bold text-center text-pink-700">Instagram story</h2>
</div>
<ul class="md:flex items-center justify-center md:space-x-8">
<li class="flex flex-col items-center space-y-2">
<div class="bg-gradient-to-tr from-yellow-500 to-pink-600 rounded-full p-1 relative">
<a class="block bg-white p-1 rounded-full transform transition hover:-rotate-12 duration-300" href="#">
<img class="h-24 w-24 rounded-full" src="https://i.ibb.co/yhh0Ljy/profile.jpg" alt="image">
</a>
<button class="transition duration-500 absolute bottom-0 right-0 bg-blue-700 h-8 w-8 rounded-full text-white text-2xl font-semibold border-4 border-white flex justify-center items-center hover:bg-blue-900">+</button>
</div>
<p>you</p>
</li>
<li class="flex flex-col items-center space-y-2">
<div class="bg-gradient-to-tr from-yellow-500 to-pink-600 rounded-full p-1">
<a class="block bg-white p-1 rounded-full transform transition hover:-rotate-12 duration-300" href="#">
<img class="h-24 w-24 rounded-full" src="https://i.ibb.co/yhh0Ljy/profile.jpg" alt="image">
</a>
</div>
<p>tahmina_tis_353</p>
</li>
<li class="flex flex-col items-center space-y-2">
<div class="bg-gradient-to-tr from-yellow-500 to-pink-600 rounded-full p-1">
<a class="block bg-white p-1 rounded-full transform transition hover:-rotate-12 duration-300" href="#">
<img class="h-24 w-24 rounded-full" src="https://i.ibb.co/yhh0Ljy/profile.jpg" alt="image">
</a>
</div>
<p>Adiba_3883</p>
</li>
<li class="flex flex-col items-center space-y-2">
<div class="bg-gradient-to-tr from-yellow-500 to-pink-600 rounded-full p-1">
<a class="block bg-white p-1 rounded-full transform transition hover:-rotate-12 duration-300" href="#">
<img class="h-24 w-24 rounded-full" src="https://i.ibb.co/yhh0Ljy/profile.jpg" alt="image">
</a>
</div>
<p>forhadx_9008</p>
</li>
<li class="flex flex-col items-center space-y-2">
<div class="bg-gradient-to-tr from-yellow-500 to-pink-600 rounded-full p-1">
<a class="block bg-white p-1 rounded-full transform transition hover:-rotate-12 duration-300" href="#">
<img class="h-24 w-24 rounded-full" src="https://i.ibb.co/yhh0Ljy/profile.jpg" alt="image">
</a>
</div>
<p>shahnoor_877</p>
</li>
</ul>
</section>
How to Create a Story Component with Tailwind CSS?
To create a story component with Tailwind CSS, we will follow these steps:
- Create the HTML markup for the story component.
- Add the necessary Tailwind CSS classes to style the different elements of the component.
- Add JavaScript code to handle the navigation buttons.
Let's start by creating the HTML markup for the story component:
<div class="story-component">
<div class="story-images">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<div class="story-captions">
<div class="story-caption active">
<h3>Caption 1</h3>
<p>Description 1</p>
</div>
<div class="story-caption">
<h3>Caption 2</h3>
<p>Description 2</p>
</div>
<div class="story-caption">
<h3>Caption 3</h3>
<p>Description 3</p>
</div>
</div>
<div class="story-navigation">
<button class="story-prev"><</button>
<button class="story-next">></button>
</div>
</div>
In the HTML markup, we have a div
element with a class of story-component
that contains two child elements: div
with a class of story-images
and div
with a class of story-captions
. The story-images
element contains a series of img
elements that represent the images or videos in the story component. The story-captions
element contains a series of div
elements with a class of story-caption
that represent the captions for each image or video.
Next, we will add the necessary Tailwind CSS classes to style the different elements of the story component. We will use the grid
and flex
utility classes to create a responsive layout for the component. We will also use the bg-gray-900
and text-white
classes to style the background and text color of the captions.
.story-component {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
height: 100%;
width: 100%;
}
.story-images {
height: 100%;
width: 100%;
}
.story-images img {
height: 100%;
width: 100%;
object-fit: cover;
}
.story-captions {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
padding: 1rem;
position: absolute;
bottom: 0;
width: 100%;
}
.story-caption {
display: none;
}
.story-caption.active {
display: block;
}
.story-caption h3 {
font-size: 1rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.story-caption p {
font-size: 0.8rem;
}
.story-navigation {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
bottom: 0;
width: 100%;
padding: 1rem;
}
.story-navigation button {
background-color: rgba(255, 255, 255, 0.5);
border: none;
color: #fff;
cursor: pointer;
font-size: 1.5rem;
height: 2.5rem;
width: 2.5rem;
margin: 0 0.5rem;
}
.story-navigation button:hover {
background-color: rgba(255, 255, 255, 0.8);
}
Finally, we will add JavaScript code to handle the navigation buttons. We will use the querySelectorAll
method to select all the caption elements and the forEach
method to loop through them. We will also use the classList
property to add and remove the active
class from the caption elements when the navigation buttons are clicked.
const captions = document.querySelectorAll('.story-caption');
const prevBtn = document.querySelector('.story-prev');
const nextBtn = document.querySelector('.story-next');
let currentSlide = 0;
function showSlide(index) {
captions.forEach((caption, i) => {
if (i === index) {
caption.classList.add('active');
} else {
caption.classList.remove('active');
}
});
}
function nextSlide() {
currentSlide++;
if (currentSlide > captions.length - 1) {
currentSlide = 0;
}
showSlide(currentSlide);
}
function prevSlide() {
currentSlide--;
if (currentSlide < 0) {
currentSlide = captions.length - 1;
}
showSlide(currentSlide);
}
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
Conclusion
In this article, we have learned how to create a story component UI component with Tailwind CSS from scratch. We have seen how Tailwind CSS provides a set of pre-defined CSS classes that can be used to create a responsive and customizable story component without writing any custom CSS code. We have also seen how to add JavaScript code to handle the navigation buttons. With these skills, you can create a wide range of UI components for different types of websites and applications.