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><a href="#">edit</a></span></p>
  </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;
}

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

#view-profile > p, #view-profile > span {
  margin-bottom: 20px;
  margin-right: 24px;
}

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

.personal-info {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

.personal-info img {
  top: -45px;
  width: 127px;
  position: relative;
}

.personal-info.note{
  float: right;
}

#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;
}