JSFiddle - React, Tailwind, and code Playground

Image Widget - Interface

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="widget-interface">
  <header>
    <p>Edit your image</p>
    <a href="#">Need help?</a>
  </header>
  <div id="preview-image">
    <img src="https://hd.unsplash.com/photo-1470158499416-75be9aa0c4db" />
  </div>
  <div class="button-holder">
    <div class="btn btn-primary">Replace</div>
    <div class="btn btn-default">Edit</div>
    <div class="btn btn-danger">Remove</div>
  </div>

  <form class="form-horizontal" action="#">
    <div class="form-group">
      <div class="col-xs-4 control-label">
        <label>Do you want to add a link?</label>
      </div>

      <div class="col-xs-8">
        <div class="radio-buttons clearfix">
          <div class="radio">
            <input type="radio" id="link-yes" name="link-image" value="link-yes">
            <label for="link-yes">
              Yes
            </label>
          </div>
          <div class="radio">
            <input type="radio" id="link-no" name="link-image" value="link-no" checked>
            <label for="link-no">
              No
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="form-group" id="link-action">
      <div class="col-xs-4 control-label">
        <label for="link-type">Link action</label>
      </div>
      <div class="col-xs-8">

        <label for="link-type" class="select-proxy-display">
          <span class="icon fa fa-chevron-down"></span>
          <span class="select-value-proxy">&mdash;What would you like the link to do?&mdash;</span>

          <select name="link_type" id="link-type" data-label="select" class="hidden-select form-control">
            <option selected value="none">&mdash;What would you like the link to...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
html,
body {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  background: #f2f6f7;
}


/*BUTTONS*/

.btn {
  border-radius: 6px;
  line-height: 44px;
  padding: 0px 15px;
  border: none;
}

.btn-default {
  color: #333;
  background-color: #e4e9eb;
  border-bottom: 2px solid #cfd3d5;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default:active:focus,
.btn-default:active:hover {
  color: #333;
  background-color: #cfd3d5;
  border-color: #cfd3d5;
  outline: none;
}

.btn-primary {
  color: #FFF;
  background-color: #00abd2;
  border-bottom: 2px solid #0087a6;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:hover,
.btn-primary:active:hover {
  color: #FFF;
  background-color: #0087a6;
  border-color: #0087a6;
  outline: none;
}

.btn-danger {
  color: #FFF;
  background-color: #d9534f;
  border-bottom: 2px solid #c9302c;
}

.btn-danger:focus,
.btn-danger:active,
.btn-danger:active:focus,
.btn-danger:hover,
.btn-danger:active:hover {
  color: #FFF;
  background-color: #c9302c;
  border-color: #c9302c;
  outline: none;
}

.btn-link,
a {
  color: #00abd2;
}

header {
  display: flex;
  font-size: 0.8em;
  border-bottom: 1px solid #E3E9EB;
  margin-bottom: 3rem;
  padding-bottom: 1.5em;
}

header.titles {
  font-weight: bold;
}

header p {
  flex: 1;
  margin: 0 1.4rem 0 0;
}

header a {
  text-decoration: none;
}

#preview-image {
  position: relative;
  text-align: center;
  border: 1px solid #d9ddde;
  background-color: #FFF;
}

#preview-image img {
  width: auto;
  max-height: 250px;
}

.button-holder {
  margin-top: 10px;
}

.button-holder .btn {
  margin-right: 10px;
}

.button-holder .btn:last-child {
  margin-right: 0px;
  float: right;
}

.form-horizontal {
  margin-top: 30px;
}

#link-action {
  display: none;
}


/*LINK ACTION - NOT NEEDED*/

#document,
#webpage,
#screen {
  display:...

JavaScript

$('#link-type').on('change', function() {
  var selectedValue = $(this).val();
  var selectedText = $(this).find("option:selected").text();
  $('.section.show').removeClass('show');
  $('#' + selectedValue).addClass('show');
  $(this).parents('.select-proxy-display').find('.select-value-proxy').html(selectedText);
});

$('#transition-list').on('change', function() {
  var selectedText = $(this).find("option:selected").text();
  $(this).parents('.select-proxy-display').find('.select-value-proxy').html(selectedText);
});

function checkAllowOpenPanels() {
  if ($('#link-yes').is(':checked')) {
    $('#link-action').addClass('show');
  } else if ($('#link-no').is(':checked')) {
    $('#link-action').removeClass('show');
  }
}

$('input[name="link-image"]:radio').on('change', checkAllowOpenPanels);