JSFiddle - React, Tailwind, and code Playground

by brunomateus

HTML

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
      <div id="container">
        <header>
        <div>
          <img src="https://themes.3rdwavemedia.com/demo/bs5/pillar/assets/images/profile.jpg" width="220">
        </div>
      
        <div id="personal-info">
          <h1>STEVE DOE</h1>
          <h3>Full Stack Developer</h3>

          <ul class="no_bullet contact">
            <li>[email protected]</li>
            <li>0123 456 78900</li>
          </ul>
        </div>
        

        <div id="sites">
          <ul class="no_bullet">
            <li><a href="http://linkedin.com/in/stevedoe" target="_blank">
            <img src="https://freeiconshop.com/wp-content/uploads/edd/linkedin-solid.png"> linkedin.com/in/stevedoe
          </a></li>
          <li>
            <a href="github.com/username" target="_blank">
            <img src="https://cdn.iconscout.com/icon/free/png-256/github-163-761603.png"> github.com/username
          </a>
          </li>
          <li><a href="#">codepen.io/username/</a></li>
          <li>
             <a href="#">yourwebsite.com</a>
          </li>
          </ul>
        </div>
      </header>
        
        <section id="summary">
        <h2>CAREER SUMMARY</h2>

        <p>
        Summarise your career here. You can make a PDF version of your resume using our free Sketch template here. 
        Aenean commodo ligula eget dolor aenean massa. 
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
        Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget. Lorem ipsum dolor sit amet, consectetuer...

CSS

body {
  font-family: 'Roboto', sans-serif;
  background-color: #F7F8FA;
  color: rgb(88, 103, 124);
}

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 1000px;
  margin: 20px auto;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.176) 0px 16px 48px 0px;
}

header {
  grid-column-start: 1;
  grid-column-end: 4;
  background-color: #434E5E;
  color: white;
  display: flex;
  flex-direction: row;
}

#personal-info {
  flex-grow: 1;
  padding: 20px;
}

ul.contact {
  padding: 0;
  color: rgba(255, 255, 255, 0.6);
}

#sites {
  padding: 20px;
}

#sites img {
  background-color: white;
  padding: 5px;
  border-radius: 2px;
  width: 14px;
}

#sites a{
  color: rgba(255, 255, 255, 0.6);
}

#sites a:hover{
  color: white;
}

h2, h4, h5, h6 {
  color: #434E5E;
  margin: 5px 0;
}

h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid;
  margin: 40px 0 20px 0;
}


#summary {
  grid-column-start: 1;
  grid-column-end: span 3;
  margin-left: 20px;
  margin-right: 20px;
}

main {
  grid-column: 1 / span 2;
  margin-left: 20px;
  margin-right: 10px;
}

.company {
  float: right;
  font-size: 0.8em;
}

.period {
  color: rgb(170, 180, 195);
  font-weight: normal;
}

.tech {
  margin-bottom: 40px;
}

.tech li {
  display: inline-block;
  background-color: rgb(88, 103, 124);
  color: white;
  border-radius: 0.25em;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
}

aside {
  grid-column: 3 / span 1;
  margin-right: 20px;
}

.no_bullet {
  list-style-type: none;
}