JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
        <header>
            <h1>
                <a href="#">
                    <img src="https://raw.githubusercontent.com/dgrigorov/SoftUni/master/Web%20Fundamentals/CSS/4.Responsive%20Design%20-%20Bootstrap/Problem-02/images/flower-logo.png" alt="logo"/>
                    <span>Flowers's Home</span>
                </a>
            </h1>
            <nav>
                <ul>
                    <li>
                        <a href="#">Orchids</a>
                    </li>
                    <li>
                        <a href="#">Roses</a>
                    </li>
                    <li>
                        <a href="#">Daisies</a>
                    </li>
                    <li>
                        <a href="#">Sunflowers</a>
                    </li>
                </ul>
            </nav>
        </header>
        <aside class="left">
                <ul>
                    <li>
                        <a href="#">
                            <img src="https://raw.githubusercontent.com/dgrigorov/SoftUni/master/Web%20Fundamentals/CSS/4.Responsive%20Design%20-%20Bootstrap/Problem-02/images/social_twitter_box.png" alt="logo"/>
                            <span>Tweet about us</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://raw.githubusercontent.com/dgrigorov/SoftUni/master/Web%20Fundamentals/CSS/4.Responsive%20Design%20-%20Bootstrap/Problem-02/images/social_facebook.png" alt="logo" />
                            <span>Follow us on Facebook</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://raw.githubusercontent.com/dgrigorov/SoftUni/master/Web%20Fundamentals/CSS/4.Responsive%20Design%20-%20Bootstrap/Problem-02/images/social_google.png" alt="logo" />
                           ...

CSS

body {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	background: url(https://raw.githubusercontent.com/dgrigorov/SoftUni/master/Web%20Fundamentals/CSS/4.Responsive%20Design%20-%20Bootstrap/Problem-02/images/background-flowers.jpg);
}

	body #wrapper {
		width: 960px;
		margin: 0 auto;

		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;  

		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
	}

		body #wrapper > * {
			padding: 10px;
			flex: 1 100%;
		}

	body #wrapper > header {
		background-color: rgba(255, 255, 255, 0.8);
		border: 2px solid #000;
		padding: 20px;
		text-align: right;
	}

		body #wrapper header h1 a,
		body #wrapper aside ul li a {
			color: #000;
			text-decoration: none;
		}

			body #wrapper header h1 a > img {
				width: 30%;
				float: left;
			}

		body #wrapper header nav {
			text-align: right;
		}

			body #wrapper header nav ul li {
				list-style-type: none;
				text-align: right;
				display: inline-block;
				padding: 10px 30px;
				background-color: #eb2a7b;
				border: 1px solid #000;
			}

				body #wrapper header nav ul li a {
					color: #fff;
					text-decoration: none;
				}

	body #wrapper aside {
		background-color: rgba(255, 255, 255, 0.8);
		border: 2px solid #000;
		padding: 0 20px;
		width: 15%;
		margin-top: 30px;
	}

		body #wrapper aside ul {
			padding-left: 0;
		}

			body #wrapper aside ul li {
				list-style-type: none;
				text-align: left;
			}

	body #wrapper aside.left {
		float: left;
	}

	body #wrapper aside.right {
		float: right;
	}

		body #wrapper aside.right ul li p {
			line-height: 1.6;
		}

	body #wrapper section {
		width: 59%;
		float: left;
		margin-top: 30px;
		margin-left: 10px;
		background-color: rgba(255,255,255,0.8);
		border: 2px solid #000;
	}

		body #wrapper section article {
			padding: 10px;
		}

			body #wrapper section article header h1 {
				font-size: 1.5em;
				margin: 0;
			}

			body #wrapper...