JSFiddle - React, Tailwind, and code Playground

by nynexman4464

HTML

<section class="vcard clearfix">
    <img src="http://upload.wikimedia.org/wikipedia/commons/0/09/Man_Silhouette.png"/>
    <div class='body'>
    <header>
        <h1>Joe Smith</h1>
        <h2>Senior Marketing Director</h2>
    </header>
    <dl>
        <dt>Tel:</dt>
        <dd>(555) 555-5255</dd>
        <dt>Address:</dt>
        <dd>1060 W Addison St, Chicago, IL 60613</dd>
    </dl>
    </div>
    <div class="buttonrow">
        <button>Edit</button>
        <button class="right">Add Friend</button>
    </div>
</section>
<section class=details>
    <article>
        <header><h1>About Me</h1></header>
        <p>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat consectetur orci, et vehicula tortor sagittis quis. Curabitur vulputate velit nec neque mattis ullamcorper. Suspendisse dolor purus, pharetra sed finibus a, tempus quis enim. Cras libero arcu, iaculis vel imperdiet vel, vehicula vel odio. Etiam sit amet justo risus. Nam sit amet turpis eu lacus dapibus sodales. Pellentesque vitae auctor ligula. Proin suscipit diam nec urna pharetra viverra. Aliquam lacus ipsum, scelerisque vitae urna placerat, lobortis faucibus magna. Mauris lacinia tincidunt mollis. Curabitur eget consequat erat.</p>

        <p>Aenean sed laoreet odio. Mauris ullamcorper magna eget turpis venenatis ultrices. Nullam scelerisque sapien id nulla egestas ultrices. Ut et dui lobortis, fermentum leo ut, sollicitudin nibh. Sed et tincidunt lorem, ac imperdiet felis. Curabitur aliquam pulvinar est, laoreet iaculis quam pharetra venenatis. Vestibulum id tortor in nisl egestas condimentum quis ut dui. Vestibulum varius massa vel scelerisque accumsan. </p>
    </article>
    <article>
        <header><h1>Projects</h1></header>
        <p>Aenean sed laoreet odio. Mauris ullamcorper magna eget turpis venenatis ultrices. Nullam scelerisque sapien id nulla egestas ultrices. Ut et dui lobortis, fermentum leo ut, sollicitudin nibh. Sed et tincidunt lorem,...

CSS

body{
    background: gray;
    max-width: 6in;
}
.clearfix{
    overflow: auto;
    zoom: 1;
}
.vcard{
    position: relative;
}
.vcard img{
    float: left;
    height: 150px;
    width: 150px;
    padding-right: 10px;
}
.vcard h1{
    margin: 0;
    margin-bottom: .25em;
}
.vcard h2{
    font-size: 1em;
    margin: 0;
    margin-bottom: .25em;
}
.vcard dl{
    margin: 0;
}
.vcard dt{
    float: left;
    width: 5em;
}
.vcard dd:not(:first-of-type){
  float:left
  //clear: both;
}
.vcard dd{
  //float: left;
  margin-inline-start: 0;
  margin: 0;
}
.vcard .buttonrow{
    position: absolute;
    bottom: .3em;
    left: calc(150px + 10px + 4px);
    right: .5em;
}
.vcard .right{
    float: right;
}
section{
    margin: .5em;
    padding: .5em;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: white;
}
article header{
    border-bottom: 1px solid #ccc;
}
article header h1,
article header p{
    margin: .25em 0;
}