JSFiddle - React, Tailwind, and code Playground

by Arup Rakshit

HTML

<div class="container" id='view-profile'>
  <nav>
    <ul><a href="#">MY RESERVATIONS</a></ul>
    <ul><a href="#">WISHLIST</a></ul>
    <ul><a href="#">PROFILE</a></ul>
  </nav>
  <section class="profile-details">
    <p> My Profile </p>
    <p><span>Personal details</span> <span><a href="#" class="dotted-link">edit</a></span></p>
    <div>
      <img src="http://i.stack.imgur.com/r6IAZ.jpg" alt="R6iaz" width="100" height="100">
      <ul style="list-style-type:none" class="profile-info">
        <li><span> Arup </span>  <span> Rakshit </span></li>
        <li><span> MALE </span>  <span> 31/08/1987 </span></li>
        <li>[email protected]</li>
        <li>+91 3-333-457-187</li>
      </ul> 
      <ul style="list-style-type:none" class="profile-note">
        <li><span> PHONE NO. NOT VERIFIED </span></li>
        <li>A note about phone verification, system recognise if </li>
        <li>phone is verified or not.If not this note and warning</li> 
        <li> occurs with link to edit page where verificaton can take place</li>
      </ul>
    </div>
  </section>
  <section class="account">
    <h4>Social accounts log in</h4>
    <p> add your social account for easy, 1-click login in the future, or unlink your previously connected social account </p>
    <a class="btn btn-info fb" href="#">
      connected
    </a>
    <a class="btn btn-info google" href="#">
      connect
    </a>
  </section>
  <section class='profile-secutiry'>
    <h4>Security settings</h4>
    <p>Reset password for your GobGob account here</p>
    <a href="#" class="btn btn-info" role="button">RESET PASSWORD</a>
  </section>
  <section>
    <h4>General settings</h4>
    <div class="subscriptions">
      <label>
        <input type="checkbox" name="input" value="Type here">
        Allow email notifications
      </label>
      <label>
        <input type="checkbox" name="input" value="Type here">
        Subscribe to newsletter
      </label>
    </div>
  </section>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

#view-profile {
  background-color: white;
  width: 70%;
}

.navigation-links > span {
  display: inline-block;
  margin-right: 24px;
  margin-bottom: 40px;
  margin-top: 31px;
}

.profile-detais > p > span {
  margin-left: 30px;
}

#view-profile .dotted-link {
    color: #0000ff;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    text-decoration: none;
}

.profile-info {
  display: inline-block;
  margin-left: 21px;
}

.profile-note {
  display: inline-block;
  float: right !important;
}

#view-profile nav ul {
    display: inline;
    text-decoration: none;
}
#view-profile nav ul a {
    text-decoration: none;
}

.subscriptions label {
    display: block;
}

.profile-secutiry {
  background-color: #E9EFFF;
}

section, nav {
  padding: 28px;
}

nav a {
    color: #83ACFF;
}