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)

537

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

random design

Author:
QQ-VVN

5 months ago

412
Full HTML Version
What's Included: Title*: Required input Description: Optional textarea Fully responsive and dark mode ready Simple validation (required on title)

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

387
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

8 months ago

1.1k
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

Author:
M Junaid

4 months ago

416
cards
cards with background animation

Author:
Anonymous

2 years ago

11.3k
Track Your Order
Track Your Order

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

370
Payment form

Author:
ORGIN_DREAMS

5 months ago

446
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

3 months ago

691
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Author:
ishimwe prince

5 months ago

744
Plant Game
Checking to see if it works

Author:
Becky Keyworth

6 months ago

631
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

11 months ago

3.5k
Simple layout

Author:
Edward Carandang

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components