JSFiddle - React, Tailwind, and code Playground

by pandigity

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>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="sidebar">
        <p>some info here</p>
    </div>
    <div class="main">
        <header>
            <a href="#" id="logo">Harry Potter Wiki</a>

            <nav>
                <ul>
                    <li><a href="#">Hogwarts</a></li>
                    <li><a href="#">Ilvemory</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </nav>
        </header>
        <section id="hero">
            <div id="content">
                <h1>Sensible Solutions</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
            </div>
            <img src="images/harrypotter.jpg" id="harry">
        </section>
        <section id="info">
                <div id="content2">
                    <h2>Reinvention</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
                </div>
                <img src="images/vector-mountains.svg" id="mountain-vector">
            </section>

        <ul id="features">
          <li>
              <i class="fa fa-id-card" aria-hidden="true"></i>
              <p>Something soemthing text something bla</p>
          </li> 
          <li>
                <i class="fa fa-id-card"...

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

body, html { height: 100%; }
body {
    margin:0;
    font-family: 'Montserrat', sans-serif;
    display: grid;
    grid-template-rows: auto 50px;
    grid-template-columns: 12% auto;
    grid-template-areas:
        "sidebar right"
        "footer footer";
}
a { text-decoration: none; }
ul { list-style-type: none; float:right; }
ul li {
    display:inline;
}
ul li a { color: #fff; padding: 15px; }

#logo {
    padding: 15px;
    margin-left: 15px;
    background-color: #F3F1C7;
    color: #298383;
    text-align:center;
    font-weight: bold;
    display: inline-block;
}
header {
    background-color: #41C7C7;
    grid-area: head;
    display: grid;
    grid-template-columns: [logo-start] fit-content(20%) [nav-start] auto [nav-end];
}

section#hero {
    background-color: #36ADAD;
    padding: 2em;
    border-top: 5px solid #2EA0A0;
    grid-area: hero;
    display: grid;
    grid-template-columns: repeat(2, auto);
}

#content h1 {
    text-transform: uppercase;
    color: #FFFBC5;
}

#content p {
    color: #fff;
}
 
img {
    max-width: 100%;
    background-size: cover;
    margin: 0 auto;
}

#mountain {
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

.sidebar {
    grid-area: sidebar;
    background: #1c9090;
    color: #ffffff;
    padding: 1em;
}

.main {
    grid-area: right;
    grid-template-rows: 51px fit-content(30%) 40% auto;
    display: grid;
    grid-template-areas:
        "head"
        "hero"
        "invention"
        "features"
}

footer {
    grid-area: footer;
    background: lightgray;
}

#features {
    display: grid;
    grid-template-columns: repeat(5, auto);
    text-align:center;
    grid-area: features;
}

#features i {
    font-size: 2em;
}

ul#features {
    margin: 0; padding: 0;
}

ul#features li {
    background-color: lightgray;
    padding: 1em;
    align-self: start;
}

ul#features li p {
    color: #4C4C4C;
}

ul#features...