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)

761

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

Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 year ago

1k
Subscription Plans
Subscription Plans

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

784
Responsive Multi-Step Registration
Responsive Multi-Step Registration

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.7k
Snake Game tailwind
snake game

Author:
QQ-VVN

8 months ago

654
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

8 months ago

845
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

11 months ago

1.8k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 year ago

2.5k
Clean Component Sharing Hub (Landing State)
A minimalist, "before-talking" landing screen designed for a code or design component sharing platform. Features a welcoming header, three distinct action cards for sharing/browsing/exporting code, and a floating input bar, all styled with soft shadows and ample white space mimicking modern design tools.

Author:
Hamza Atig

1 month ago

49
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

10 months ago

1.4k
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

13.8k
Linear infinite brand scrolling with hover effect
Beautiful lineat brand scrolling partner with hover effect

Author:
Walid Ahmad

1 year ago

2.5k
Collapsible content

Author:
Rafferty Kim

2 years ago

13.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components