Learn how to create a clean and modern About Us page layout using HTML and Tailwind CSS. Easy steps for beginners to design a professional webpage.
Table of Contents
Creating an About Us page is important for any website. This page tells visitors who you are and what your website is about. In this blog, we will learn how to make a simple, clean, and modern About Us page layout using HTML and Tailwind CSS.
This guide is perfect for beginners who want to design an about us page without writing complex CSS. We will use Tailwind CSS to style the layout easily.
What You Need Before You Start
- A basic understanding of HTML
- A little knowledge of Tailwind CSS classes
- A code editor (like VS Code)
- A browser to view the result
Source Code
Step 1 (HTML Code):
To get started, we first need to create a basic HTML file. In this file, we will include the main structure for our about us page. Let’s break down and explain the structure of the HTML code:
Head Section
<head>
...
</head>Purpose:
- Defines the page metadata and links external styles/scripts.
- Sets up:
- Character encoding: UTF-8
- Viewport: for responsive design
- Title: About Us - Gridly
- Tailwind CSS: included via CDN
- Google Fonts: using the Inter font
- Font Awesome: for icons
- Custom stylesheet: styles.css
Body: Overall Styling
<body class="bg-[#1a1a1a]">- Sets the body background to a dark shade (#1a1a1a).
Header
<header>...</header>Includes:
- Logo: A green square with a smaller black square (SVG).
- Navigation menu (visible on medium+ devices): Home, Services, Work, About (highlighted), Careers.
- Contact Us button: Green background, black text, hover effect to lime shade.
Main Content
<main>...</main>Contains three main sections:
Hero Section
<section class="hero-bg">...</section>- Large heading About Us.
- Subtitle with company mission.
- Background: black + a subtle texture image.
About Gridly Section
<section>...</section>- Split into 2 columns on medium screens:
- Text about Gridly’s values and focus.
- Graphic block: lime square inside a black rounded box with a glow effect.
Our Story Table
<section> <table>...</table> </section>A table with 6 points of the Gridly journey:
- Design
- Engineering
- Project Management
- Collaboration
- Client-Centric Approach
- Driving Success
Each point:
- Large number (e.g., 01) in lime.
- Title and underline.
- Small descriptive paragraph.
Call-to-Action (CTA) Section
<section>...</section>- Highlights Gridly’s ongoing success.
- Button: Start Project
Footer
<footer>...</footer>Contains:
- Logo
- Quick links: Services, Work, About, Careers, Contact.
- Social icons: Facebook, Instagram, X (Twitter).
- Contact info: Email, phone, location.
- Copyright
Step 2 (CSS Code):
Now let’s use custom CSS for body font, table, hero-bg, and neon-glow. Let’s break down the CSS code step by step:
body
body {
font-family: 'Inter', sans-serif;
}- This sets the font of the entire page to Inter (a clean, modern font).
- If Inter is not available, it will fall back to sans-serif (any generic sans-serif font).
.neon-glow
.neon-glow {
box-shadow: 0 0 5px #a3e635, 0 0 10px #a3e635, 0 0 15px #a3e635;
}This class adds a neon glow effect using multiple box-shadow layers:
- 0 0 5px → small glow
- 0 0 10px → medium glow
- 0 0 15px → larger outer glow
The glow color is #a3e635 (a bright lime green).
.hero-bg
.hero-bg {
background-color: #000000;
background-image: url('https://www.transparenttextures.com/patterns/french-stucco.png');
}- Sets the background to black (#000000).
- Adds a texture pattern on top (from the provided URL).
- The pattern makes the black background look less flat and more stylish.
table
table {
width: 100%;
height: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 5px;
text-align: center;
}- Makes the table take up the full width and height of its container.
- table-layout: fixed; → all columns are equal width (or as defined).
- border-collapse: collapse; → borders of cells are merged (no double borders).
- border-spacing: 5px; → spacing between cells (this won’t have an effect with collapse, so this might be a leftover or meant for when collapse is removed).
- text-align: center; → centers the text in each cell.
td
td {
border-width: 1px;
border-style: solid;
border-color: #212121;
padding: 40px 30px;
}Every table cell (td) will have:
- A solid border, 1px wide, colored dark gray (#212121)
- Padding of 40px top/bottom and 30px left/right for spacing inside the cell
body {
font-family: 'Inter', sans-serif;
}
.neon-glow {
box-shadow: 0 0 5px #a3e635, 0 0 10px #a3e635, 0 0 15px #a3e635;
}
.hero-bg {
background-color: #000000;
background-image: url('https://www.transparenttextures.com/patterns/french-stucco.png');
}
table {
width: 100%;
height: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 5px;
text-align: center;
}
td {
border-width: 1px;
border-style: solid;
border-color: #212121;
padding: 40px 30px;
} Final Output:
Conclusion:
Now you have a clean and modern About Us page layout using HTML and Tailwind CSS.
Using Tailwind CSS saves time because you don’t have to write custom CSS for every part. You can continue to improve this page by adding team photos, links to social media, or providing more details about your company.
Tip: You can reuse this layout on other pages or make small changes for different sections of your website.
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 😊
