Creating Reusable Components with HTML, CSS, and JavaScript

September 12, 2025 by Tech Paradox

Creating Reusable Components HTML, CSS, and JavaScript imply finding ways to create components that can be used in various areas of the websites or web pages, similar to how we’ve done with React JS or Vue JS.

The main objective is to create such templates using HTML, CSS, and JavaScript in a way that we can utilize in multiple projects.

Here we will be familiarized with the process of creating or developing the static code, but we have a large scale of PHP code to which we can make these things dynamic.

Access More Blogs now.

HTML,CSS,JS Components

Creating Structure With HTML to Create Reusable Components

We are building a Card Component that takes title, description, and Image dynamically and can be reused multiple times without problem We have to create a Folder and inside it we have to create an HTML file named index.html and write the logic to Create Reusable Components.

We have to create a Folder and inside it we have to create an HTML file named index.html and write the logic to Create Reusable Components.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Reusable Card Components</title>
<link rel="stylesheet" href="components/card.css">
</head>
<body>
<!-- Where the cards will be rendered -->
<div id="card-container"></div>
<script type="module">
import { createCard } from './components/card.js';
const container = document.getElementById('card-container');
// Reuse component with different content
const card1 = createCard({
title: "Reusable Card 1",
description: "This is the first card created using vanilla JS.",
image: "https://via.placeholder.com/150"
});
const card2 = createCard({
title: "Reusable Card 2",
description: "This is another card with different content.",
image: "https://via.placeholder.com/150"
});
container.appendChild(card1);
container.appendChild(card2);
</script>
</body>
</html>

In this file we have created a div, with an id card-container in which the content that is in the Javascript will be appended. After that, we have opened a script tag and within it there is javascript logic.

And the createCard function is being imported as we are importing card.js as will explain below. And then I am using document.getElementById to get the card-container id. After that, we need to generate cards section which will take parameters and we should send the data.

Javascript File for Rendering the Cards in HTML

We have to create a file inside components folder and name it card.js which will have the following code –

export function createCard({ title, description, image }) {
  const card = document.createElement('div');
  card.classList.add('card');
  card.innerHTML = `
    <img src="${image}" alt="${title}" />
    <h3>${title}</h3>
    <p>${description}</p>
  `;
  return card;
}

The code contains a function which have three parameters and all are included inside the card body and taken reference to the index.html.

Creating Styles for Reusable Components

This is the optional yet suggested section to beautify the UI of the cards, and we can add the styling accordingly; the limit is the sky in terms of styling.

export function createCard({ title, description, image }) {
  const card = document.createElement('div');
  card.classList.add('card');
  card.innerHTML = `
    <img src="${image}" alt="${title}" />
    <h3>${title}</h3>
    <p>${description}</p>
  `;
  return card;
}

Explanation of all the files

The table below covers all the points that are necessarily included in the particular files –

Index.html	Card.js	Card.css
Loads a Blank container to get all the dynamic data.	Container a function createcard() that shows dynamic data in index.html.	Provides Styling for all the cards.
Imports and uses the createCard function from the card.js	Insert HTML using InnerHTML.	Includes hovering effects and responsive designs.
Dynamically Created Multiple Cards with Different Data.	Returns the Card Elements to be appended anywhere.	–

HTML CSS JS

Conclusion

In conclusion, Creating Reusable Components is an important concept that follows the functionality of create once and use anywhere. It has several benefits, one of which is to save time and development efforts.

We can create reusable components not only cards, but also we can use Modal, Tabs, Accordions, Alerts, Navbar, and so on.

Tech Paradox Softwares.

Tech Paradox provides detailed insights into the subject of technology, quality case studies and makes readers familiar with what software solutions are and how the industry works in the real world.