JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Responsive Exercise 1</title>
</head>

<body>
    <header>
        <h1>Responsive Design</h1>
        <h2 class="hide-xs">The best thing in the world after the invention of the Web</h2>
    </header>

    <div class="wrapper">
        <nav>
            <ul class="hide-xs hide-s">
                <li><a href="#">Home</a></li>
                <li><a href="#">Tutorial</a></li>
                <li><a href="#">Examples</a></li>
            </ul>
            <select class="dropdown hide-m hide-l">
                <option value="home">Home</option>
                <option value="tutorial">Tutorial</option>
                <option value="examples">Examples</option>
            </select>
        </nav>
        <main>
            <section>
                <h2>New Responsive Design Examples</h2>
                <p>Lorem Ipsum Dolor</p>
                <p>Lorem Ipsum Dolor</p>
                <p>Lorem Ipsum Dolor</p>

            </section>
            <section>
                <h2>New Tutorial</h2>
                <p>Lorem Ipsum Dolor</p>

            </section>
            <section>
                <h2>New Tools</h2>
                <p>Lorem Ipsum Dolor</p>
                <p>Lorem Ipsum Dolor</p>

            </section>
        </main>
    </div>
    <footer>
        <p>Copyleft 2020</p>
        Email: <a href="mailto:[email protected]">[email protected]</a>
    </footer>
</body>

</html>

CSS

* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

header {
    background-color: yellow;
}

nav {
    background-color: orange;
}

section {
    background-color: blue;
    color: white;
    padding: 20px 5px;
}

footer {
    background-color: pink;
}

header, nav, section, footer {
    border-radius: 5px;
    margin: 16px 0;
}

@media screen and (max-width:480px) {
    .hide-xs {
        display: none;
    }
}

@media screen and (min-width:600px) {
    .hide-s {
        display: none;
    }
}

@media screen and (min-width: 936px) {
    .hide-m {
        display: none;
    }
    .wrapper {
        display: flex;
    }

    nav {
        width: 200px;

    }

    main {
        flex-grow: 1;
        display: grid;
        grid-template-columns: 50% 50%;
    }

    section:last-child {
        grid-column-start: 2;
    }
}

@media screen and (min-width: 1366px) {
    .hide-l {
        display: none;
    }
    .wrapper {
        display: flex;
    }
    nav {
        width: 200px;
        flex-grow: none;
        margin-right: 20px;
    }
    .hide-l {
        display: none;
    }

    main {
        flex-grow: 1;
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 1fr 1fr 1fr;
    }
    section:last-child {
        grid-column-start: auto;
    }
}