Create HTML Layout Generator Tool with Tailwind CSS & JS

Faraz

By Faraz -

Learn how to create an HTML layout generator tool using HTML, Tailwind CSS, and JavaScript with simple steps. Build a custom UI layout generator easily.

Join us on Telegram
free-html-layout-generator.webp
Read Alsocreate an eye-catching pricing table with just html, css, and javascript.jpgCreate an Eye-Catching Pricing Table with Just HTML, CSS, and Javascript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Creating modern web layouts is often time-consuming, especially when you want a clean and responsive design. This is where an HTML Layout Generator Tool can help. By using HTML, Tailwind CSS, and JavaScript, you can build a tool that generates pre-designed layouts quickly. Tailwind CSS provides ready-to-use utility classes, making design tasks much simpler. In this guide, we will walk through the step-by-step process of building this tool.

Prerequisites

Before starting, make sure you have the following:

  1. Basic knowledge of HTML, CSS, and JavaScript.
  2. Tailwind CSS setup (using CDN or local installation).
  3. A code editor like VS Code.
  4. A browser to test the tool.

Source Code

Step 1 (HTML Code):

Here is a detailed explanation of the HTML code:

1. Document Type and Basic Setup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Layout Generator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
  • <!DOCTYPE html>: Declares this file as an HTML5 document.
  • <html lang="en">: Sets the page language to English.
  • <meta charset="UTF-8">: Defines the character encoding as UTF-8 (supports all characters).
  • <meta name="viewport">: Makes the page responsive on mobile devices.
  • <title>: Sets the title shown on the browser tab.
  • <script src="https://cdn.tailwindcss.com"></script>: Loads Tailwind CSS via CDN.
  • Google Fonts (Inter): Custom font is imported.
  • <link rel="stylesheet" href="styles.css">: Links an external CSS file for extra custom styles.

2. Body Tag and Main Container

<body class="bg-gray-900 text-white antialiased">
    <div class="flex flex-col min-h-screen">
  • body class="bg-gray-900 text-white antialiased":
    • bg-gray-900 → Dark background color.
    • text-white → White text.
    • antialiased → Smooths text edges.
  • flex flex-col min-h-screen: Creates a vertical flexbox that spans the full screen height.

3. Header Section

<header class="bg-gray-800/80 backdrop-blur-sm border-b border-gray-700 sticky top-0 z-50">
    <div class="container mx-auto px-6 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-3">
            <svg class="w-8 h-8 text-indigo-400" ...></svg>
            <h1 class="text-xl font-bold tracking-wider">LayoutGen Pro</h1>
        </div>
    </div>
</header>
  • bg-gray-800/80: Dark background with 80% opacity.
  • backdrop-blur-sm: Adds a blur effect behind the header (glassmorphism).
  • sticky top-0 z-50: Keeps the header fixed at the top while scrolling.
  • Logo & Title:
    • SVG icon used as a logo.
    • LayoutGen Pro is the website name.

4. Main Content Section

<main class="flex-grow container mx-auto px-6 py-8 md:py-12">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
  • flex-grow: Allows the main section to expand.
  • container mx-auto: Centers the content horizontally.
  • grid grid-cols-1 lg:grid-cols-12: A responsive grid layout with 1 column on small screens and 12 columns on large screens.

4.1 Sidebar (Controls)

<aside class="lg:col-span-3">
    <div class="bg-gray-800 p-6 rounded-2xl shadow-lg sticky top-24">
        <h2 class="text-lg font-semibold mb-4 text-indigo-300">Generator Controls</h2>
        <div class="space-y-6">
            <div>
                <label for="layout-select" ...>Select a Component</label>
                <select id="layout-select" class="w-full bg-gray-700 ...">
                    <option value="hero">Hero Section</option>
                    <option value="pricing">Pricing Table</option>
                    ...
                </select>
            </div>
            <button id="generate-btn" class="w-full bg-indigo-600 ...">
                Generate Layout
            </button>
        </div>
    </div>
</aside>
  • Purpose: This sidebar contains a dropdown menu to select components (e.g., Hero Section, Pricing Table) and a Generate Layout button.
  • sticky top-24: Keeps the sidebar fixed when scrolling.

4.2 Preview Area

<div class="lg:col-span-9">
    <div class="bg-gray-800 rounded-2xl shadow-lg">
        <div class="p-4 border-b border-gray-700 flex justify-between items-center">
            <h3 class="text-lg font-semibold text-gray-300">Live Preview</h3>
            <button id="show-code-btn" class="bg-gray-700 ...">
                View Code
            </button>
        </div>
        <div id="preview-area" class="p-4 md:p-8 min-h-[500px] bg-gray-900 rounded-b-2xl">
            <!-- Generated layout will be injected here -->
            <div class="flex items-center justify-center h-full text-gray-500">
                <p>Select a component and click "Generate Layout" to see a preview.</p>
            </div>
        </div>
    </div>
</div>
  • Displays the Live Preview of the selected layout.
  • The View Code button will open a modal showing generated HTML code.
  • min-h-[500px] ensures the preview area is at least 500px tall.

5. Footer Section

<footer class="bg-gray-800/50 mt-12 border-t border-gray-700">
    <div class="container mx-auto px-6 py-4 text-center text-gray-500">
        <p>© 2025 LayoutGen Pro. All rights reserved.</p>
        <p>Made with ❤️ by <a href="https://www.codewithfaraz.com" target="_blank">CodeWithFaraz</a></p>
    </div>
</footer>
  • Contains copyright.
  • bg-gray-800/50 gives a transparent dark background.

6. Code Modal

<div id="code-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
    <div class="bg-gray-800 rounded-2xl shadow-2xl w-11/12 max-w-4xl max-h-[80vh] flex flex-col">
        <div class="p-4 flex justify-between items-center border-b border-gray-700">
            <h4 class="text-lg font-semibold">Generated HTML Code</h4>
            <button id="close-modal-btn" class="text-gray-400 hover:text-white">×</button>
        </div>
        <div class="p-4 flex-grow overflow-y-auto">
            <pre><code id="code-output" class="language-html text-sm"></code></pre>
        </div>
        <div class="p-4 border-t border-gray-700">
            <button id="copy-code-btn" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition">
                Copy to Clipboard
            </button>
        </div>
    </div>
</div>
  • This modal displays generated code.
  • hidden keeps it invisible until triggered by JavaScript.
  • copy-code-btn copies the code to the clipboard.

7. JavaScript

<script src="script.js"></script>
  • This external script (script.js) is responsible for:
    • Generating layouts.
    • Updating the preview area.
    • Showing the modal and copying code.
Read AlsoHow to Create a Responsive Our Services Section with HTML and CSS.jpgHow to Create a Responsive Our Services Section with HTML and CSS (Source code)

Step 2 (CSS Code):

Tailwind CSS does not style scrollbars by default, so we add custom CSS to control the scrollbar appearance.

1. Font Family

body {
  font-family: 'Inter', sans-serif;
}
  • Tailwind CSS default font is usually sans, but here we explicitly set the body to use the "Inter" font (imported from Google Fonts).
  • This ensures a consistent typography across the entire website.

2. Scrollbar Styling (Custom CSS)

Scrollbar Width

::-webkit-scrollbar {
  width: 8px;
}
  • Sets scrollbar width to 8px (default browser scrollbars can be wide and ugly).
  • ::-webkit-scrollbar targets Chrome, Safari, and Edge browsers.

Scrollbar Track

::-webkit-scrollbar-track {
  background: #1a202c;
}
  • The "track" is the background of the scrollbar (the empty space).
  • Here, it’s set to #1a202c (dark gray from Tailwind’s gray palette).

Scrollbar Thumb

::-webkit-scrollbar-thumb {
  background: #4a5568;
  border-radius: 10px;
}
  • The "thumb" is the draggable part of the scrollbar.
  • We use a medium gray (#4a5568) with rounded corners (10px) for a modern look.

Scrollbar Thumb Hover

::-webkit-scrollbar-thumb:hover {
  background: #718096;
}
  • Changes thumb color on hover (#718096 is a lighter gray).

3. Fade-in Animation

We add custom animations because Tailwind’s default animations are limited.

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}
  • .fade-in is a custom class that applies an animation named fadeIn for 0.5 seconds with a smooth ease-in-out transition.

4. Keyframes for Animation

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
  • from { ... } → Starts with 0 opacity and moves 10px down.
  • to { ... } → Ends with full opacity and original position.
  • This creates a smooth appearing effect when an element is loaded or displayed.
body {
  font-family: 'Inter', sans-serif;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #1a202c;
}
::-webkit-scrollbar-thumb {
  background: #4a5568;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #718096;
}
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Step 3 (JavaScript Code):

Use JavaScript to create and insert layout templates dynamically. Let's break down the JavaScript code step by step:

1. Getting DOM Elements

const generateBtn = document.getElementById('generate-btn');
const layoutSelect = document.getElementById('layout-select');
const previewArea = document.getElementById('preview-area');
const showCodeBtn = document.getElementById('show-code-btn');
const closeModalBtn = document.getElementById('close-modal-btn');
const copyCodeBtn = document.getElementById('copy-code-btn');
const codeModal = document.getElementById('code-modal');
const codeOutput = document.getElementById('code-output');
  • These lines get references to elements in the HTML using their id.
  • generateBtn → The "Generate Layout" button.
  • layoutSelect → Dropdown to select components like Hero, Pricing, Footer.
  • previewArea → Area where generated HTML will be displayed.
  • codeModal and codeOutput → Modal and <code> block for showing raw code.

2. Current Layout Variable

let currentLayoutCode = '';
  • Stores the HTML code of the currently selected layout.
  • This is updated when the user clicks "Generate Layout".

3. Layout Templates

const layouts = {
  hero: `<div class="text-center bg-gray-900 py-20 px-6 rounded-lg fade-in">...</div>`,
  pricing: `<div class="bg-gray-900 py-12 fade-in">...</div>`,
  contact: `<div class="bg-gray-900 py-12 fade-in">...</div>`,
  features: `<div class="bg-gray-900 py-16 sm:py-24 fade-in">...</div>`,
  testimonial: `<section class="bg-gray-900 py-12 fade-in">...</section>`,
  footer: `<footer class="bg-gray-800 text-white fade-in">...</footer>`,
};
  • This object holds predefined HTML snippets (Tailwind-based layouts).
  • Each key (hero, pricing, etc.) corresponds to a dropdown option.
  • When selected, its HTML code is inserted into the preview area.

4. Generate Layout (Preview)

generateBtn.addEventListener('click', () => {
  const selectedLayout = layoutSelect.value;
  currentLayoutCode = layouts[selectedLayout].trim();
  previewArea.innerHTML = currentLayoutCode;
});
  • When "Generate Layout" is clicked:
    • It gets the selected component from layoutSelect.
    • Updates currentLayoutCode with the matching template.
    • Inserts it into the preview area (previewArea.innerHTML).

5. Show Code Modal

showCodeBtn.addEventListener('click', () => {
  if (!currentLayoutCode) {
    alert('Please generate a layout first!');
    return;
  }
  codeOutput.textContent = currentLayoutCode;
  codeModal.classList.remove('hidden');
});
  • When "View Code" is clicked:
    • Checks if a layout is generated. If not, shows an alert.
    • Otherwise, displays the currentLayoutCode inside the <code> block.
    • Opens the modal (codeModal).

6. Close Code Modal

closeModalBtn.addEventListener('click', () => {
  codeModal.classList.add('hidden');
});
  • Hides the modal when the close button (×) is clicked.

7. Copy Code to Clipboard

copyCodeBtn.addEventListener('click', () => {
  const tempTextArea = document.createElement('textarea');
  tempTextArea.value = currentLayoutCode;
  document.body.appendChild(tempTextArea);
  tempTextArea.select();
  try {
    document.execCommand('copy');
    copyCodeBtn.textContent = 'Copied!';
    copyCodeBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
    copyCodeBtn.classList.add('bg-blue-600');
  } catch (err) {
    console.error('Failed to copy: ', err);
    copyCodeBtn.textContent = 'Copy Failed';
    copyCodeBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
    copyCodeBtn.classList.add('bg-red-600');
  }
  document.body.removeChild(tempTextArea);

  setTimeout(() => {
    copyCodeBtn.textContent = 'Copy to Clipboard';
    copyCodeBtn.classList.remove('bg-blue-600', 'bg-red-600');
    copyCodeBtn.classList.add('bg-green-600', 'hover:bg-green-700');
  }, 2000);
});
  • Steps for Copying Code:
    1. Creates a temporary <textarea> to hold the code.
    2. Selects and copies the text using execCommand('copy').
    3. Changes button text and color to give feedback (e.g., "Copied!").
    4. Resets the button after 2 seconds.

8. Close Modal on Escape Key

window.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && !codeModal.classList.contains('hidden')) {
    codeModal.classList.add('hidden');
  }
});
  • If the user presses Escape, the modal closes.

9. Close Modal on Outside Click

codeModal.addEventListener('click', (e) => {
  if (e.target === codeModal) {
    codeModal.classList.add('hidden');
  }
});
  • If a user clicks outside the modal content, it closes.
const generateBtn = document.getElementById('generate-btn');
const layoutSelect = document.getElementById('layout-select');
const previewArea = document.getElementById('preview-area');
const showCodeBtn = document.getElementById('show-code-btn');
const closeModalBtn = document.getElementById('close-modal-btn');
const copyCodeBtn = document.getElementById('copy-code-btn');
const codeModal = document.getElementById('code-modal');
const codeOutput = document.getElementById('code-output');

let currentLayoutCode = '';

// --- Layout Templates ---
const layouts = {
  hero: `
<div class="text-center bg-gray-900 py-20 px-6 rounded-lg fade-in">
    <h1 class="text-4xl md:text-6xl font-extrabold text-white leading-tight mb-4">
        Build Modern Websites Faster
    </h1>
    <p class="text-lg md:text-xl text-gray-400 max-w-2xl mx-auto mb-8">
        Harness the power of Tailwind CSS with our professionally designed, ready-to-use components.
    </p>
    <div class="flex justify-center space-x-4">
        <a href="#" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-full transition-transform transform hover:scale-105">
            Get Started
        </a>
        <a href="#" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-full transition">
            Learn More
        </a>
    </div>
</div>`,
  pricing: `
<div class="bg-gray-900 py-12 fade-in">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-4xl font-extrabold text-white">Flexible Pricing Plans</h2>
            <p class="mt-4 text-lg text-gray-400">Choose the plan that's right for your project.</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Basic Plan -->
            <div class="bg-gray-800 rounded-2xl p-8 transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-2xl font-semibold text-white">Basic</h3>
                <p class="mt-4 text-gray-400">For personal projects & startups.</p>
                <div class="mt-6">
                    <span class="text-5xl font-extrabold text-white">$29</span>
                    <span class="text-base font-medium text-gray-400">/mo</span>
                </div>
                <ul class="mt-6 space-y-4 text-gray-300">
                    <li class="flex items-center"><svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>10 Components</li>
                    <li class="flex items-center"><svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>Community Support</li>
                </ul>
                <a href="#" class="mt-8 block w-full bg-gray-700 hover:bg-gray-600 text-white text-center py-3 rounded-lg font-semibold">Choose Plan</a>
            </div>
            <!-- Pro Plan -->
            <div class="bg-indigo-600 rounded-2xl p-8 ring-4 ring-indigo-500 ring-opacity-50 transform scale-105">
                <h3 class="text-2xl font-semibold text-white">Pro</h3>
                <p class="mt-4 text-indigo-200">For growing businesses & professionals.</p>
                <div class="mt-6">
                    <span class="text-5xl font-extrabold text-white">$99</span>
                    <span class="text-base font-medium text-indigo-200">/mo</span>
                </div>
                <ul class="mt-6 space-y-4 text-white">
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>Unlimited Components</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>Priority Support</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>All Pro Features</li>
                </ul>
                <a href="#" class="mt-8 block w-full bg-white hover:bg-indigo-100 text-indigo-600 text-center py-3 rounded-lg font-semibold">Choose Plan</a>
            </div>
            <!-- Enterprise Plan -->
            <div class="bg-gray-800 rounded-2xl p-8 transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-2xl font-semibold text-white">Enterprise</h3>
                <p class="mt-4 text-gray-400">For large-scale applications.</p>
                <div class="mt-6">
                    <span class="text-4xl font-extrabold text-white">Contact Us</span>
                </div>
                <ul class="mt-6 space-y-4 text-gray-300">
                    <li class="flex items-center"><svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>Dedicated Infrastructure</li>
                    <li class="flex items-center"><svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>24/7 Premium Support</li>
                </ul>
                <a href="#" class="mt-8 block w-full bg-gray-700 hover:bg-gray-600 text-white text-center py-3 rounded-lg font-semibold">Contact Sales</a>
            </div>
        </div>
    </div>
</div>`,
  contact: `
<div class="bg-gray-900 py-12 fade-in">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
            <div class="md:grid md:grid-cols-2">
                <div class="p-8 md:p-12">
                    <h2 class="text-2xl font-bold text-white">Get in Touch</h2>
                    <p class="mt-2 text-gray-400">We'd love to hear from you. Fill out the form and we'll get back to you shortly.</p>
                    <form class="mt-8 space-y-6">
                        <div>
                            <label for="name" class="sr-only">Name</label>
                            <input type="text" name="name" id="name" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Your Name">
                        </div>
                        <div>
                            <label for="email" class="sr-only">Email</label>
                            <input type="email" name="email" id="email" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Your Email">
                        </div>
                        <div>
                            <label for="message" class="sr-only">Message</label>
                            <textarea name="message" id="message" rows="4" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Your Message"></textarea>
                        </div>
                        <div>
                            <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition">Send Message</button>
                        </div>
                    </form>
                </div>
                <div class="bg-indigo-600 p-8 md:p-12 text-white">
                    <h3 class="text-xl font-bold">Contact Information</h3>
                    <p class="mt-4 text-indigo-100">123 Design Street<br>New York, NY 10001</p>
                    <p class="mt-4 text-indigo-100">[email protected]</p>
                    <p class="mt-4 text-indigo-100">+1 (555) 123-4567</p>
                </div>
            </div>
        </div>
    </div>
</div>`,
  features: `
<div class="bg-gray-900 py-16 sm:py-24 fade-in">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:text-center">
            <h2 class="text-base font-semibold leading-7 text-indigo-400">Build Faster</h2>
            <p class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">Everything you need to deploy your app</p>
            <p class="mt-6 text-lg leading-8 text-gray-300">Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.</p>
        </div>
        <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
            <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
                <div class="flex flex-col">
                    <dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-white">
                        <svg class="h-5 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 01-1.44-8.765 4.5 4.5 0 018.302-3.046a3.5 3.5 0 014.504 4.272A4 4 0 0115 17H5.5zm3.75-2.75a.75.75 0 001.5 0V9.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.1 0l-3.25 3.5a.75.75 0 101.1 1.02l1.95-2.1v4.59z" clip-rule="evenodd" /></svg>
                        Push to deploy
                    </dt>
                    <dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-300">
                        <p class="flex-auto">Commodo nec sagittis tortor mauris sed. Turpis tortor quis scelerisque diam id accumsan nullam tempus. Pulvinar etiam lacus volutpat eu. Phasellus praesent ligula sit faucibus.</p>
                    </dd>
                </div>
                <div class="flex flex-col">
                    <dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-white">
                        <svg class="h-5 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" /></svg>
                        SSL certificates
                    </dt>
                    <dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-300">
                        <p class="flex-auto">Pellentesque enim a commodo malesuada turpis eleifend risus. Facilisis donec placerat sapien consequat tempor fermentum nibh.</p>
                    </dd>
                </div>
                <div class="flex flex-col">
                    <dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-white">
                        <svg class="h-5 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M4.632 3.533A2 2 0 016.577 2h6.846a2 2 0 011.945 1.533l1.976 8.234A3.489 3.489 0 0016 11.5H4c-.476 0-.93.095-1.344.267l1.976-8.234z" /><path fill-rule="evenodd" d="M4 13a2 2 0 100 4h12a2 2 0 100-4H4zm11.24 2a.75.75 0 01.75-.75H16a.75.75 0 010 1.5h-.01a.75.75 0 01-.75-.75z" clip-rule="evenodd" /></svg>
                        Simple queues
                    </dt>
                    <dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-300">
                        <p class="flex-auto">Pellentesque sit elit congue ante nec amet. Dolor aenean curabitur viverra suspendisse iaculis eget. Nec mollis placerat ultricies euismod.</p>
                    </dd>
                </div>
            </dl>
        </div>
    </div>
</div>`,
  testimonial: `
<section class="bg-gray-900 py-12 fade-in">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-xl text-center">
            <h2 class="text-lg font-semibold leading-8 tracking-tight text-indigo-400">Testimonials</h2>
            <p class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">We have worked with thousands of amazing people</p>
        </div>
        <div class="mx-auto mt-16 flow-root max-w-2xl sm:mt-20 lg:mx-0 lg:max-w-none">
            <div class="-mt-8 sm:-mx-4 sm:columns-2 sm:text-[0] lg:columns-3">
                <div class="pt-8 sm:inline-block sm:w-full sm:px-4">
                    <figure class="rounded-2xl bg-gray-800 p-8 text-sm leading-6">
                        <blockquote class="text-gray-300">
                            <p>“This tool is a game-changer. I can now prototype and build layouts in a fraction of the time. The generated code is clean and easy to customize.”</p>
                        </blockquote>
                        <figcaption class="mt-6 flex items-center gap-x-4">
                            <img class="h-10 w-10 rounded-full bg-gray-700" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" onerror="this.onerror=null;this.src='https://placehold.co/256x256/374151/9ca3af?text=User';">
                            <div>
                                <div class="font-semibold text-white">Sarah Dayan</div>
                                <div class="text-gray-400">@sarahdayan</div>
                            </div>
                        </figcaption>
                    </figure>
                </div>
                <div class="pt-8 sm:inline-block sm:w-full sm:px-4">
                    <figure class="rounded-2xl bg-gray-800 p-8 text-sm leading-6">
                        <blockquote class="text-gray-300">
                            <p>“The premium feel of the components is outstanding. My clients are always impressed with the final result. Highly recommended!”</p>
                        </blockquote>
                        <figcaption class="mt-6 flex items-center gap-x-4">
                            <img class="h-10 w-10 rounded-full bg-gray-700" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" onerror="this.onerror=null;this.src='https://placehold.co/256x256/374151/9ca3af?text=User';">
                            <div>
                                <div class="font-semibold text-white">Jane Cooper</div>
                                <div class="text-gray-400">@janecooper</div>
                            </div>
                        </figcaption>
                    </figure>
                </div>
                <div class="pt-8 sm:inline-block sm:w-full sm:px-4">
                    <figure class="rounded-2xl bg-gray-800 p-8 text-sm leading-6">
                        <blockquote class="text-gray-300">
                            <p>“Incredible! The attention to detail in the design and the responsiveness of the layouts are top-notch. Saves me hours of work.”</p>
                        </blockquote>
                        <figcaption class="mt-6 flex items-center gap-x-4">
                            <img class="h-10 w-10 rounded-full bg-gray-700" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" onerror="this.onerror=null;this.src='https://placehold.co/256x256/374151/9ca3af?text=User';">
                            <div>
                                <div class="font-semibold text-white">John Doe</div>
                                <div class="text-gray-400">@johndoe</div>
                            </div>
                        </figcaption>
                    </figure>
                </div>
            </div>
        </div>
    </div>
</section>`,
  footer: `
<footer class="bg-gray-800 text-white fade-in">
    <div class="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
        <nav class="-mb-6 columns-2 sm:flex sm:justify-center sm:space-x-12" aria-label="Footer">
            <div class="pb-6">
                <a href="#" class="text-sm leading-6 text-gray-300 hover:text-indigo-400">About</a>
            </div>
            <div class="pb-6">
                <a href="#" class="text-sm leading-6 text-gray-300 hover:text-indigo-400">Blog</a>
            </div>
            <div class="pb-6">
                <a href="#" class="text-sm leading-6 text-gray-300 hover:text-indigo-400">Jobs</a>
            </div>
            <div class="pb-6">
                <a href="#" class="text-sm leading-6 text-gray-300 hover:text-indigo-400">Press</a>
            </div>
            <div class="pb-6">
                <a href="#" class="text-sm leading-6 text-gray-300 hover:text-indigo-400">Partners</a>
            </div>
        </nav>
        <div class="mt-10 flex justify-center space-x-10">
            <a href="#" class="text-gray-400 hover:text-gray-300">
                <span class="sr-only">Twitter</span>
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.71v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" /></svg>
            </a>
            <a href="#" class="text-gray-400 hover:text-gray-300">
                <span class="sr-only">GitHub</span>
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.168 6.839 9.49.5.092.682-.217.682-.482 0-.237-.009-.868-.014-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.031-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.03 1.595 1.03 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.003 10.003 0 0022 12c0-5.523-4.477-10-10-10z" clip-rule="evenodd" /></svg>
            </a>
        </div>
        <p class="mt-10 text-center text-xs leading-5 text-gray-500">© 2025 LayoutGen Pro, Inc. All rights reserved.</p>
    </div>
</footer>`,
};

// --- Event Listeners ---
generateBtn.addEventListener('click', () => {
  const selectedLayout = layoutSelect.value;
  currentLayoutCode = layouts[selectedLayout].trim();
  previewArea.innerHTML = currentLayoutCode;
});

showCodeBtn.addEventListener('click', () => {
  if (!currentLayoutCode) {
    alert('Please generate a layout first!');
    return;
  }
  codeOutput.textContent = currentLayoutCode;
  codeModal.classList.remove('hidden');
});

closeModalBtn.addEventListener('click', () => {
  codeModal.classList.add('hidden');
});

copyCodeBtn.addEventListener('click', () => {
  const tempTextArea = document.createElement('textarea');
  tempTextArea.value = currentLayoutCode;
  document.body.appendChild(tempTextArea);
  tempTextArea.select();
  try {
    // Use execCommand as a fallback for broader browser support in iFrames
    document.execCommand('copy');
    copyCodeBtn.textContent = 'Copied!';
    copyCodeBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
    copyCodeBtn.classList.add('bg-blue-600');
  } catch (err) {
    console.error('Failed to copy: ', err);
    copyCodeBtn.textContent = 'Copy Failed';
    copyCodeBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
    copyCodeBtn.classList.add('bg-red-600');
  }
  document.body.removeChild(tempTextArea);

  setTimeout(() => {
    copyCodeBtn.textContent = 'Copy to Clipboard';
    copyCodeBtn.classList.remove('bg-blue-600', 'bg-red-600');
    copyCodeBtn.classList.add('bg-green-600', 'hover:bg-green-700');
  }, 2000);
});

// Close modal on escape key press
window.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && !codeModal.classList.contains('hidden')) {
    codeModal.classList.add('hidden');
  }
});

// Close modal on outside click
codeModal.addEventListener('click', (e) => {
  if (e.target === codeModal) {
    codeModal.classList.add('hidden');
  }
});

Final Output:

free-html-layout-generator.gif
Read Alsocreate-testimonials-with-html-css-and-javascript.webpCreate Testimonials with HTML CSS & JavaScript

Conclusion:

By following these steps, you can create a fully functional HTML Layout Generator Tool using HTML, Tailwind CSS, and JavaScript. This tool helps developers save time by generating ready-to-use layout templates. With Tailwind CSS, creating responsive and modern designs becomes effortless. Keep improving your tool by adding more templates and customization features.

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 😊

Tags: create html layout generator using tailwind css and javascript, step by step guide to build html layout generator tool, html layout generator with tailwind css for beginners, build custom ui generator, html layout generator, tailwind css tool, javascript layout builder, ui generator
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺