Acode Master!

Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 21-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Code Master(Mfuranziza Dusabe Hamza)

339

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Creator | New Post</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            background-color: #f5f5f5;
        }

.header {
            background-color: #2c3e50;
            color: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

.nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

.logo {
            font-size: 1.5rem;
            font-weight: bold;
        }

.main-content {
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

.create-container {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

h2 {
            color: #2c3e50;
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
        }

form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

label {
            font-weight: 500;
            color: #34495e;
        }

input[type="text"],
        textarea {
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

input[type="text"]:focus,
        textarea:focus {
            outline: none;
            border-color: #3498db;
        }

.image-preview {
            border: 2px dashed #ddd;
            border-radius: 5px;
            min-height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 1rem 0;
            position: relative;
            overflow: hidden;
        }

#previewImage {
            max-width: 100%;
            max-height: 400px;
            object-fit: contain;
            border-radius: 5px;
        }

#imageUpload {
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

button[type="submit"] {
            background-color: #3498db;
            color: white;
            padding: 1rem 1.5rem;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

button[type="submit"]:hover {
            background-color: #2980b9;
        }

.upload-label {
            display: block;
            margin-bottom: 0.5rem;
        }

@media (max-width: 768px) {
            .header {
                padding: 1rem;
            }

.create-container {
                padding: 1.5rem;
            }

h2 {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <nav class="nav">
            <div class="logo">BlogCreator</div>
            <div class="nav-links">
                <a href="#" class="nav-link">Home</a>
                <a href="#" class="nav-link">Create Post</a>
            </div>
        </nav>
    </header>

<main class="main-content">
        <div class="create-container">
            <h2>Create New Post</h2>
            <form id="postForm">
                <div class="form-group">
                    <label for="title">Title</label>
                    <input type="text" id="title" placeholder="Enter your post title..." required>
                </div>

<div class="form-group">
                    <label for="description">Description</label>
                    <textarea id="description" rows="6" placeholder="Write your post content..." required></textarea>
                </div>

<div class="form-group">
                    <label class="upload-label" for="imageUpload">Upload Image</label>
                    <input type="file" id="imageUpload" accept="image/*">
                </div>

<div class="image-preview" id="previewContainer">
                    <span class="preview-text" id="previewText">Image Preview</span>
                    <img id="previewImage" src="#" alt="Preview" style="display: none;">
                </div>

<button type="submit">Publish Post</button>
            </form>
        </div>
    </main>

imageInput.addEventListener('change', function() {
            const file = this.files[0];
            
            if (file) {
                const reader = new FileReader();
                
                previewText.style.display = 'none';
                previewImage.style.display = 'block';
                
                reader.addEventListener('load', function() {
                    previewImage.setAttribute('src', this.result);
                });
                
                reader.readAsDataURL(file);
            } else {
                previewText.style.display = 'block';
                previewImage.style.display = 'none';
                previewImage.setAttribute('src', '');
            }
        });

// Form submission handling
        document.getElementById('postForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Add your form submission logic here
            const title = document.getElementById('title').value;
            const description = document.getElementById('description').value;
            const image = imageInput.files[0];
            
            console.log({ title, description, image });
            alert('Post submitted successfully!');
            
            // Reset form
            this.reset();
            previewText.style.display = 'block';
            previewImage.style.display = 'none';
            previewImage.setAttribute('src', '');
        });
    </script>
</body>
</html>

Related Examples

Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

4 months ago

204
Chat Bot

Author:
Md. Tofayel islam

2 weeks ago

160
Responsive fullscreen youtube video

Author:
Anonymous

1 year ago

8.6k
Updated customer details page
Customer details page

Author:
Olivia Smith

1 year ago

3k
Career Page
This is a career page component built in tailwind

Author:
Deepak Sharma

6 months ago

723
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

2 months ago

472
delivery
It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

Author:
Nishimwe Jeanine

2 months ago

210
profile
user profile

Author:
gidy

2 months ago

124
Table
Table with image and status with pagination buttons

Author:
Abhiraj

6 months ago

1.6k
Chatbox template

Author:
Lucas Martinez

2 years ago

11.8k
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

1 month ago

43
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components