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)

266

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

Aurora Spinner
Aurora Spinner using tailwindcss

Author:
Deepak Kumar Chouhan

6 months ago

919
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

Author:
KULDEEP

1 week ago

18
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

3 months ago

310
Play, Pause and Stop buttons

Author:
Lukas Müller

2 years ago

10.8k
magic card
by salvator

Author:
Baraka Salvator

1 month ago

330
Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

20.5k
Soft Lights & Slow Beats
Sink into the tranquil rhythms of a Sunday afternoon. This playlist blends soft melodies and gentle beats to create a mysterious yet comforting atmosphere — perfect for relaxing, reflecting, or simply unwinding as the day fades away.

Author:
Bonimater

1 month ago

67
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

3 months ago

162
cards
cards with background animation

Author:
Anonymous

1 year ago

10.7k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

5 months ago

1.3k
Privacy policy page template

Author:
Sameer Sultana

2 years ago

17.7k
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

3 months ago

444

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components