JSFiddle - React, Tailwind, and code Playground

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>My Portfolio</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="css/all.css">
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,700,700i&display=swap&subset=latin-ext" rel="stylesheet">
</head>
<body>
    
    <header>
        <div id="title"><h1><span>ISMAR</span> Portfolio</h1></div>
        
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Works</a>
                    <ul>
                        <li><a href="#">Adobe Photoshop</a></li>
                        <li><a href="#">Adobe Illustrator</a></li>
                        <li><a href="#">Adobe XD</a></li>
                        <li><a href="#">HTML and CSS</a></li>
                    </ul>
                </li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>

    </header>

    <div id="container">

        <aside>

            <div id="profile-image">
                <img src="Images/ismar-photo.jpg">
            </div>

            <div id="about-me">
                <p>Hello i’m Ismar, i’m 23 and i’m from Tuzla, Bosnia and Herzegovina. I study and do Web Design, Development and UX/UI design. 
                   Here you can find some of my works i had been doing while studying on IT Academy as online student by using their online platform. 
                   I’m still not an expert, i’m only junior, but i want to learn more, i want to get more experience, get more knowledge, advices 
                   and tips from others and build my skills much more. </p>
            </div>

            <div id="social">
                <div id="contact-me"><p>Contact me on social media:</p></div>

                <div id="icons">
        ...

CSS

body {
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
}

@media only screen and (min-width : 320px) {

    /* start of header */ 
    header {
        background: rgb(73, 134, 226);
    }
    
    header > #title > h1 {
        text-align: center;
        color: white;
        margin: 0;
    }

    header > #title > h1 > span{
        color: rgb(247, 200, 48);
    }

    /* navigation */
    nav > ul {
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
        justify-content: center;
        align-items: center;
    }
    nav >  ul > li {
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
    }

    nav > ul > li > a {
        padding: 10px 13px;
        width: 90px;
        margin: 10px 0;
        color: white;
        display: block;
        text-align: center;
        text-decoration: none;
        position: relative;
    }

    nav > ul > li > a:hover {
        color: rgb(119, 199, 236);
    }

    /* drop down navigation from "works" */

    nav > ul > li > ul {
        position: absolute;
        display: block;
        top: 50px;
        left: -42px;
        z-index: 2;
        list-style: none;
        background: rgb(89, 139, 233);
        width: 200px;
        padding: 10px;
        margin: 0;
        display: none;
        border-radius: 5px;
    }

    nav > ul > li:hover > ul {
        display: block;
        position: absolute;
    }

    nav > ul > li > ul > li {
        margin: 0;
        padding: 0;
    }

    nav > ul > li > ul > li > a {
        padding: 10px 13px;
        display: block;
        text-align: center;
        text-decoration: none;
        color: white;
    }

    nav > ul > li > ul > li > a:hover {
        color: rgb(119, 199, 236);
    }

    /* end of drop down navigation of "works" */

    /* end of navigation */

    /* end of header */


    /*start of container */

    #container {
        display: flex;
       ...