JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Neo Brutalism Portfolio</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="hero">
            <h1>Your Name</h1>
            <p>Neo Brutalism Designer</p>
        </section>

        <section class="portfolio">
            <div class="portfolio-item">
                <img src="image1.jpg" alt="Project 1">
                <h2>Project 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>

            <div class="portfolio-item">
                <img src="image2.jpg" alt="Project 2">
                <h2>Project 2</h2>
                <p>Nulla consectetur, libero eu laoreet tristique, felis purus aliquam tellus.</p>
            </div>

            <div class="portfolio-item">
                <img src="image3.jpg" alt="Project 3">
                <h2>Project 3</h2>
                <p>Proin eget nisl ac risus malesuada tincidunt.</p>
            </div>

            <div class="portfolio-item">
                <img src="image4.jpg" alt="Project 4">
                <h2>Project 4</h2>
                <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</p>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 Your Name</p>
    </footer>
    
    <script src="script.js"></script>
</body>
</html>

CSS

/* Reset some default styles */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
}

/* Header Styles */
header {
    background-color: #000;
    color: #fff;
    padding: 20px;
}

nav ul {
    list-style: none;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

/* Hero Section Styles */
.hero {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 100px 0;
}

/* Portfolio Section Styles */
.portfolio {
    background-color: #000;
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.portfolio-item {
    background-color: #444;
    color: #fff;
    margin: 20px;
    padding: 20px;
    flex-basis: calc(33.33% - 40px); /* Adjust for the number of columns */
    box-sizing: border-box;
    text-align: center;
}

.portfolio-item img {
    max-width: 100%;
    height: auto;
}

/* Footer Styles */
footer {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 20px;
}