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)

455

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

authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

2.5k
Text Overlay Effect
This is a text overlay effect, featuring a subtle background title and a prominent foreground heading. This design enhances visual interest while maintaining a clean, modern aesthetic.

Author:
Anum Shahana

11 months ago

1.3k
NFT Header with Hero

Author:
Abdul Baset Bappy

3 months ago

607
Product hunt showcase

Author:
Lukas Müller

2 years ago

12.1k
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

510
Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

11.4k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

6 months ago

1.2k
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

1 year ago

9.5k
Neon container

Author:
Anonymous

1 year ago

3.3k
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Author:
Walid Ahmad

11 months ago

1k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

3 months ago

288
Snake Game tailwind
snake game

Author:
QQ-VVN

4 months ago

350

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components