JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="profile">
  <img class="avatar" src="http://veggieadvisor.com/wp-content/uploads/2010/07/ben-avatar.png"/>
  
  <div class="info">
    <p class="username">Bárbara Taborda</p>
    <p class="phone-number">912345678</p>
    
    <select class="status">
      <option>Online</option>
      <option>Offline</option>
      <option>Busy</option>
      <option class="status_own-message">Type your own message</option>
    </select>
    
    <input class="own-message" type="text"  placeholder="type your message here"/>
  </div>
  
</div>

CSS

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

.profile {
  padding: 20px;
  border-radius: 12px;
  background-color:rgba(0,0,0,0.7);
  color: #eee;
  font: 14px/1.5 helvetica, arial, sans-serif;
}

.profile:after {
  content: "";
  font-size: 0;
  line-height: 0;
  display: block;
  clear: both;
}

.profile .avatar {
  width: 114px;
  height: 114px;
  float: left;
  border: 3px solid lightgrey;
  border-radius: 12px;
}

.profile .info {
  float: left;
  padding: 10px 0 10px 20px;
}

.profile .username {
  font-weight: bold;
}

.profile .phone-number {
  font-size: 18px;
  font-family: helveticaneue-light;
}

.profile .status {
  display: block;
  margin-bottom: 5px;
}

.profile .own-message {
  display: none;
  outline: none;
  width: 200px;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 5px;
  border-radius: 4px;
}

.dp-block {
  display: block !important;
}

JavaScript

/*on html select change*/


var select_menu = document.getElementsByClassName('status')[0];
var own_message = document.getElementsByClassName('own-message')[0];

select_menu.onchange = function () {
  var index = this.selectedIndex;
  if(this.options[index].getAttribute('class') === 'status_own-message') {
      own_message.setAttribute('class','own-message dp-block');
  } else {
     own_message.setAttribute('class','own-message');
  }
};