Published on

How To Make A Story component With Tailwind CSS From Scratch

Tags
Story component

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:

  1. Create the HTML markup for the story component.
  2. Add the necessary Tailwind CSS classes to style the different elements of the component.
  3. 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">&lt;</button>
    <button class="story-next">&gt;</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.