JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<article class="note">
  <header>
    <div class="colors">
      <span class="color color-1"></span>
      <span class="color color-2"></span>
      <span class="color color-3"></span>
      <span class="color color-4"></span>
      <span class="color color-5"></span>
    </div>
    
    <span class="date">Sept 12, 2013</span>
    
    <span class="close">&times;</span>
  </header>
  
  <div class="content">
    <p>We can write our content here. </p>
  </div><!-- .content -->
  
  <footer>
    <a href="#" class="avatar"><img src="//fakeimg.pl/96?text=Avatar" alt=""></a>
    
    <span class="author">Andréas Lundgren</span>
  </footer>
</article><!-- .note -->

CSS

::selection {
  background: black;
  color: white;
  text-shadow: none;
}

* {
  box-sizing: border-box;
}

html {
  font: normal 16px/24px "Open Sans", Helvetica, sans-serif;
}

body {
  background-color: #476173;
  color: white;
  padding: 3rem 2rem;
}

a {
  color: white;
}

.site-header {
  text-align: center;
}
.site-header h1 {
  margin: 0 0 3rem;
}

.note {
  background: white;
  box-shadow: 0 0.25rem 0.5rem -0.125rem rgba(0, 0, 0, 0.3), 0 0.575rem 0 -0.25rem #f2f2f2, 0 0.9rem 0.5rem -0.4rem rgba(0, 0, 0, 0.3), 0 1.12rem 0 -0.5rem #e6e6e6, 0 0.5rem 2rem 0 rgba(0, 0, 0, 0.15);
  color: #333;
  margin: 0 auto 3rem;
  padding: 1rem;
  position: relative;
  z-index: 100;
  max-width: 25rem;
}
.note a {
  color: #d9453f;
  text-decoration: none;
  -moz-transition-property: color;
  -o-transition-property: color;
  -webkit-transition-property: color;
  transition-property: color;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.note a:focus, .note a:hover {
  text-decoration: underline;
}
.note header {
  border-bottom: 0.25rem solid #d9453f;
  padding-bottom: 1rem;
  position: relative;
  min-height: 2.25rem;
  -moz-transition-property: border-color;
  -o-transition-property: border-color;
  -webkit-transition-property: border-color;
  transition-property: border-color;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.note .colors {
  display: none;
  margin-right: 50%;
  overflow: hidden;
}
.note .colors .color {
  cursor: pointer;
  display: block;
  float: left;
  margin-right: .25rem;
  width: 1rem;
  height: 1rem;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration:...

JavaScript

(function() {
  var $note     = $( '.note' ),
      $colors   = $note.find( '.colors' );
  
  $colors.find( '.color' ).css( 'opacity', .5 );
  $colors.find( '.color:first-child' ).css( 'opacity', 1 );
  
  $colors.show().on( 'click', '.color', function( e ) {
    var $this = $(this),
        $colorSel = $this.css( 'background-color' );
    
    $this
    .parents( '.note' )
      .find( 'header' )
        .css( 'border-color', $colorSel );
    
    $this
    .parents( '.note' )
      .find( '.author' )
        .css( 'background-color', $colorSel );
    
    $this
    .parents( '.note' )
      .find( 'a' )
        .css( 'color', $colorSel );
    
    $this
    .siblings( '.color' )
      .each(function( e ) {
        $(this).css( 'opacity', .5 );
      });
    
    $this.css( 'opacity', 1 );
  });
 
})();