JSFiddle - React, Tailwind, and code Playground

by Donlee Malacad

HTML

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width,user-scalable=0">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Cache-Control" content="no-cache">
        <meta http-equiv="Expires" content="0">

        <title>Corp Website</title>

        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
    </head>
    <body>
        <div class="container">
            <!-- Left Side -->
            <div class="left-side">
                <header>
                    <ul class="site-navigation">
                        <li><a>Home</a></li>
                        <li><a>Who we are</a></li>
                        <li><a>Our service</a></li>
                        <li><a>Company profile</a></li>
                        <li><a>Contact</a></li>
                    </ul>
                </header>
            </div>
            <!-- Right Side -->
            <div class="right-side">
                <div class="container">
                    <div class="item">
                        <h1>ドンはとてもハンサムです！</h1>
                        <p>
                            IICの従業員ドンリーは、私の神よハンサムです。彼はひよこの磁石です。<br>
                            彼はまた、非常に大きな筋肉を持つボディビルダーです。<br>
                            焼きそばとラーメンが大好きです。<br>
                            彼は泳ぎ、持ち上げ、そしていつも食べ物を食べたいと思っています。 <br>
                            すみませんが、ガールフレンドはもういます。<br>
                            でも彼と一緒に写真を撮っても大丈夫です。<br>
                            彼の有名人のクラッシュはドゥアリパです。<br>
                            彼の最大の夢はアメリカに行き、Lebron Jamesに会うことです。
                        </p>
                        
                    <div class="news-container">
                            <div class="feature-tag">
                                <span>news</span>
                          ...

CSS

html, body {
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0;
    padding: 0;
    border: 0;
}

h1 {
    font-size:280%;
    font-weight: 1200;
}

.container {
    overflow: hidden;
    position: relative;
}

.left-side {
    width: 100%;
    min-height: 100vh;
    overflow: auto;
    height: auto;
    background: url('https://venturecaferotterdam.org/wp-content/uploads/2017/10/gradient-black-background-wallpaper-1.jpg');
}

.site-navigation {
    margin-top:12%;
    margin-left: 5%;
    padding:0;
}

.site-navigation {
    margin-top:5%;
    margin-left: 45px;
    padding:0;
}

.site-navigation li {
    list-style: none;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 3.5;
    font-size:16px;
}

.site-navigation li a {
    color: #fff;
    text-decoration:none;
}

.site-navigation li a:hover {
    color: #c03514;
    cursor: pointer;
}

.right-side {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    z-index: 2;
    width: 50vw;
    background-color:#fff;
    opacity:0.90;
    filter: alpha(opacity=30);
    overflow: auto;
}

.right-side .container {
    height:100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-height: calc(90vh);
    text-align: justify;
    clear: both;
    width: 70%;
    margin: 0 auto;
}

.right-side .container h1 {
    text-align: left;
    padding: 0;
}

.right-side .container p {
    font-size: 19px;
    font-weight:550;
    letter-spacing: 1.5px;
    line-height: 1.6;
}

.news-container {
    width: 100%;
    margin: 0 auto;
    height: 30px;
    display: flex;
    align-items: center;
    position:absolute;
    bottom:0;
    margin-bottom: 55px;
}

.feature-tag {
    width: 13%;
    background-color: #000;
    color: #fff;
    text-transform: capitalize;
    height:inherit;
    border: 0.4px solid #000;
    text-align: center;
    font-size: 18px;
   ...