JSFiddle - React, Tailwind, and code Playground

by krisselden

HTML

<div class="y-page-edit-content">
    <div class="y-edit-aside">
        <div class="y-edit-photo-field y-edit-splash-image-id">splashImageId</div>
    </div>
    <div class="y-edit-group">
        <div class="y-edit-group-item start y-edit-text-field y-edit-title">title</div>
        <div class="y-edit-group-item y-edit-date-and-time-field y-edit-date-and-time">dateAndTime</div>
    </div>
    <div class="y-edit-group">
        <div class="y-edit-group-item start y-edit-text-field y-edit-location">location</div>
        <div class="y-edit-group-item y-edit-text-field y-edit-address">address</div>
    </div>
    <div class="y-edit-group">
        <div class="y-edit-group-item start y-edit-text-field y-edit-website">website</div>
    </div>
    <div class="y-edit-group">
        <div class="y-edit-group-item start y-edit-text-field y-edit-extra-text">extraText</div>
    </div>
</div>

CSS

.y-page-edit-content {
  padding: 0 10px 20px 10px;
   position: relative;
    background-color: #daa;
    overflow: hidden;
    border-top: solid 1px transparent;
}

.y-edit-aside {
  margin: 10px 10px 10px 0;
  border: solid 1px transparent;
  float:left;
}

  .y-edit-photo-field {
    width: 93px;
    height: 93px;
    background:#efefef;
  }

.y-edit-group {           
  border: 1px solid #dbd8d1;
  margin: 10px 0;
  border-radius: 7px;
    background: #fff;
}
  .y-edit-group-item {
    min-height: 46px;
    border-top: 1px solid #dbd8d1;
  }

  .y-edit-group-item.start {
    border-top: 0 none;
  }