JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <nav>
        <ul>
            <li><a href="#">My Reservations</a></li>
            <li><a href="#">Wishlist</a></li>
            <li><a href="#">Profile</a></li>
        </ul>
    </nav>
    <div class="profile">
        <h1>My profile</h1>
        <h2>Personal details</h2>
        
        <div class="description">
            <div class="left-side">
                <div>
                    <img src="http://www.fastcompany.com/multisite_files/fastcompany/fc_files/profile/2219225-austin-carr-profile.jpg" alt="">
                </div>
                <div>
                   <h4>Vaibhav Mehta</h4>
                    <ul>
                        <li>Male</li>
                        <li>11/09/1990</li>
                    </ul>
                    <ol>
                        <li>[email protected]</li>
                        <li>+91-123455678</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300);

* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
}

a {
    text-decoration: none;
}

ul,
ol {
    list-style-type: none;
}

.wrapper {
    max-width: 1200px;
    margin: auto;
}

nav li {
    display: inline-block;
    text-transform: uppercase;
    font-size: 12px;
    margin-right: 20px;
}

nav a {
    color: #48A8DA;
}

.profile h1 {
    font-weight: 300;
    padding: 20px 0;
}

.profile h2 {
    font-weight: 300;
    color: #787878;
}

.description img {
    max-width: 100px;
    margin-top: 20px;
}

.left-side > div:first-of-type {
    float: left;
}

.left-side > div:last-of-type {
    float: left;
    margin: 20px 10px;
}

.left-side h4 {
    font-size: 18px;
    color: #969B9C;
    font-weight: 300;
}

.left-side ul {
    padding-top: 10px;
}

.left-side ul li {
    display: inline-block;
    margin-right: 20px;
}

.left-side li:last-of-type {
    margin-right: 0;
}

.left-side ol {
    margin-top: 15px;
}

.left-side ol li {
    margin-bottom: 8px;
}

.left-side ol li:first-child:before {
    content: "";
    display: inline-block;
    height: 18px;
    width: 20px;
    background-image: url(http://icons.iconarchive.com/icons/cornmanthe3rd/plex/512/Communication-email-2-icon.png);
    background-size: auto 100%;
    vertical-align: middle;
    background-repeat: no-repeat;
    margin-right: 5px;
}


.left-side ol li:last-child:before {
    content: "";
    display: inline-block;
    height: 18px;
    width: 20px;
    background-image: url(https://cdn3.iconfinder.com/data/icons/token/128/Telephone.png);
    background-size: auto 100%;
    vertical-align: middle;
    background-repeat: no-repeat;
    margin-right: 5px;
}