Learn how to create a beautiful and modern infographic template using HTML and CSS (Tailwind CSS). Step-by-step guide for beginners with clean code and responsive design.
Table of Contents
Infographics are a great way to show information in a visual and simple format. Whether it's for websites, presentations, or portfolios, a well-designed infographic can make your data easier to understand and more attractive.
In this blog, you will learn how to create a stylish infographic template using only HTML and CSS. This guide is beginner-friendly, mobile responsive, and does not require any JavaScript or frameworks.
Let’s get started!
Prerequisites
Before you begin, make sure you have:
- Basic knowledge of HTML and CSS
- A code editor like VS Code
- A modern web browser (Chrome, Edge, etc.)
- Internet connection to use Google Fonts and optional CDN like Tailwind (if preferred)
Source Code
Step 1 (HTML Code):
The first step is to create the basic structure of your infographic using HTML. This is where we design the layout of the page.
We will also use Tailwind CSS (via CDN) for easy and responsive design. Tailwind gives us pre-built utility classes so we don’t need to write too much CSS.
Here’s a breakdown of what’s happening in the HTML:
Head Section
<head> ... </head>Includes:
- meta charset and viewport: Ensures proper rendering and mobile responsiveness.
<title>: Sets the browser tab title.- Tailwind CSS CDN: Enables utility-first CSS styling.
- Google Fonts (Poppins): Applies modern typography.
- styles.css: External CSS file (assumed for custom styles like .glass-card or .aurora-bg).
Body Layout
<body class="aurora-bg text-white flex items-center justify-center ...">Classes used:
- aurora-bg: Custom background color.
- text-white, flex, justify-center, items-center, p-*: Tailwind utility classes for spacing and centering the content.
Main Container
<div class="w-full max-w-6xl mx-auto relative z-10">- Sets the infographic to max width (6xl) and centers it horizontally (mx-auto).
- relative and z-10 prepare it for layering elements like SVGs or shadows.
Decorative Curved SVG Path
- A curved dashed line connects the steps visually.
- Uses a linear gradient stroke that shifts from blue to purple.
- This SVG is only visible on large screens (lg:block).
Step Layout (Responsive Grid)
<div class="relative flex flex-col lg:grid lg:grid-cols-5 ...">- Mobile view: Uses a vertical column layout (flex-col).
- Large screens: Uses a 5-column grid (lg:grid-cols-5) for side-by-side phase cards.
- Each step is placed in its column (lg:col-start-x) and staggered vertically (lg:top-10, lg:top-48) for a wave-like appearance.
Each Step (Card Block)
Each step follows this pattern:
<div class="relative lg:col-start-X lg:top-Y px-8 lg:px-0">
<!-- Circular step number -->
<div class="lg:absolute ...">1</div>
<!-- Glassmorphic card -->
<div class="glass-card p-6 rounded-2xl ...">
<h3>Phase Title</h3>
<p>Description</p>
</div>
</div>- Numbered circle: Uses blur, gradient borders, and shadows for a glowing 3D button look.
- Glassmorphic card: The glass-card includes a semi-transparent background, blur effect, and border-radius.
- Phase Color Accent:
- Step 1 & 2: Blue shades
- Step 3 & 4: Purple shades
- Step 5: Pink shades
Step 2 (CSS Code):
Once the HTML layout is ready, we move on to CSS.
Here, we’ll write a few custom styles to add a glassmorphism effect and set the dark background.
body
body {
font-family: 'Poppins', sans-serif;
}- Sets the Poppins font for the entire page.
- Provides a modern, clean, and readable typeface, often used in tech/design portfolios.
.glass-card
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}This creates the glassmorphism effect:
- background: rgba(255, 255, 255, 0.05):- Sets a semi-transparent white background (5% opacity).
- backdrop-filter: blur(12px):- Applies a blur to everything behind the element.
- -webkit-backdrop-filter:- WebKit-specific version for Safari compatibility.
- border:- A subtle white border for the "frosted glass" edge.
- transition:- Smooth transition on hover using a custom cubic bezier curve (ease-in-out like motion).
.glass-card:hover
.glass-card:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}- On hover, the glass card becomes brighter and clearer, enhancing the interactive feel.
- Improves visual feedback for the user.
.aurora-bg
.aurora-bg {
background-color: #0c0a18;
}- Applies a deep navy/purple black background, ideal for contrast with neon/glass elements.
- This class is used on the
<body>to give the entire page a futuristic, dark theme.
body {
font-family: 'Poppins', sans-serif;
}
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.glass-card:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.aurora-bg {
background-color: #0c0a18;
} Final Output:
Conclusion:
Creating an infographic template using HTML and CSS is a simple yet powerful way to display data or steps visually. By following the steps above, you now have a fully working and responsive infographic layout that can be customized for any project.
This method does not require JavaScript or complex tools, making it perfect for beginners and fast-loading websites. You can style it further with your colors, icons, or even animations.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
