<div class="wysiwyg-editor">
  <div class="wysiwyg-controls">
		<div class="style">
			<a href='#' data-role='bold'>B</a>
			<a href='#' data-role='italic'>I</a>
			<a href='#' data-role='underline'>U</a>
		</div>
		<div class="align">
			<div class="active-align top"></div>
			<div class="active-align middle"></div>
			<div class="active-align bottom"></div>
			<a href='#' data-role='justifyleft'><i class="menu-left"></i></a>
			<a href='#' data-role='justifycenter'><i class="menu-center"></i></a>
			<a href='#' data-role='justifyright'><i class="menu-right"></i></a>
		</div>
  </div>
  <div class="wysiwyg-content" contenteditable>
    <b>Let's make a statement!</b>
    <br>
    <i>This is an italicised sentence.</i>
    <br>
    <u>Very important information.</u>
  </div>
</div>
/*=================
	    General
===================*/

* { 
	box-sizing: border-box;
	font-family: 'Work Sans', sans-serif;
}

body {
	background: #ECE9E6;  
	background: -webkit-linear-gradient(to right, #FFFFFF, #ECE9E6);  
	background: linear-gradient(to right, #FFFFFF, #ECE9E6); 
}

.wysiwyg-editor {
  display: block;
  width: 400px;
  margin: 100px auto 0;
}

/*=================
	General Controls
===================*/

.wysiwyg-controls {
  display: flex;
	justify-content:space-between;
	align-items:center;
  width: 100%;
  height: 50px;
	padding:15px;
  background: #fff;
	border-radius:8px;
	box-shadow: 0px 15px 40px 0 rgba(0,0,0,.08);
	margin-bottom:20px;
}

.wysiwyg-controls a {
  display: inline-block;
  width: 35px;
  height: 35px;
	font-size:18px;
  vertical-align: top;
  line-height: 38px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  color: #EAEAEA;
}

/*=================
		Style Icons
===================*/

.wysiwyg-controls [data-role="bold"] {
  font-weight: bold;
	transition:all 500ms cubic-bezier(.59,.61,0,.77);
}

.wysiwyg-controls [data-role="italic"] {
  font-style: italic;
	transition:all 500ms cubic-bezier(.59,.61,0,.77);
}

.wysiwyg-controls [data-role="underline"] {
  text-decoration: underline;
	transition:all 500ms cubic-bezier(.59,.61,0,.77);
}

.active-style {
	color: #7a7a7a !important;
	transform:scale(1.1);
}

/*=================
		 Align Icons
===================*/

.align {
	position:relative;
}

[class^="menu"], [class^="menu"]:before, [class^="menu"]:after {
	/* All Align Bars */
  position: relative;
  top: 48%;
  display: block;
  width: 65%;
  height: 3px;
	border-radius:3px;
  margin: 0 auto;
  background: #EAEAEA;
	z-index:1;
}

[class^="menu"]:before {
	/* All Top Bars */
  content: '';
  top: -7px;
  width: 100%;
}

[class^="menu"]:after {
	/* All Bottom Bars */
  content: '';
  top: 4px;
  width: 60%;
}

.menu-left:before, .menu-left:after {
	/* Align Left Margins*/
  margin-right: 10px;
}

.menu-right:after {
	/* Align right Margins*/
  margin-left: 8px;
}

/*=================
 Align Icons Active
===================*/

/* default state --left-- */

.active-align.top, .active-align.middle, .active-align.bottom {
	content:'';
  position: absolute;
  width: 23px;
  height: 3px;
	border-radius:3px;
  background: #7a7a7a;
	top:16px;
	left:6px;
	z-index:99;
	pointer-events:none;
	opacity:1;
	transition:all 500ms cubic-bezier(.59,.61,0,.77) 75ms;
}

.active-align.top {
	top:9px;
	left:10;
	transition-delay:0ms !important;
}

.active-align.bottom {
	top:23px;
	left:2px;
	transform:scaleX(.6);
	transition-delay:150ms;
}

/* Center Align Active */

.active-align.center-active.top {
	transform:translateX(42px);
}

.active-align.center-active.middle {
	transform:translateX(42px);
}

.active-align.center-active.bottom {
	transform:scaleX(.6) translateX(76px);
}

/* Right Align Active */

.active-align.right-active.top {
	transform:translateX(82px);
}

.active-align.right-active.middle {
	transform:translateX(82px);
}

.active-align.right-active.bottom {
	transform:scaleX(.6) translateX(150px);
}

/*=================
		Editing Area
===================*/

.wysiwyg-content {
	min-width:100%;
  max-width: 100%;
  width: 100%;
  height: auto;
	min-height:150px;
  padding: 26px;
  resize: both;
  overflow: auto;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
  border-radius: 8px;
  background: rgba(256,256,256,.45);
}

.wysiwyg-content:focus {
	outline:none;
}
// WYSIWYG actions
$('.wysiwyg-controls a').on('click', function(e) {
  e.preventDefault();
  document.execCommand($(this).data('role'), false);
});


// Bold Active
jQuery(function($) {
    $('.wysiwyg-content,.wysiwyg-controls').click(function(){
        if(selectionIsBold()){
          $('.style a:nth-of-type(1)').addClass('active-style');
        }
        else {
          $('.style a:nth-of-type(1)').removeClass('active-style');
        }
    });
});
function selectionIsBold() {
    var isBold = false;
    if (document.queryCommandState) {
        isBold = document.queryCommandState("bold");
    }
    return isBold;
}


// Italic Active
jQuery(function($) {
    $('.wysiwyg-content,.wysiwyg-controls').click(function(){
        if(selectionIsItalic()){
          $('.style a:nth-of-type(2)').addClass('active-style');
        }
        else {
          $('.style a:nth-of-type(2)').removeClass('active-style');
        }
    });
});
function selectionIsItalic() {
    var isItalic = false;
    if (document.queryCommandState) {
        isItalic = document.queryCommandState("italic");
    }
    return isItalic;
}


// Underline Active
jQuery(function($) {
    $('.wysiwyg-content,.wysiwyg-controls').click(function(){
        if(selectionIsUnderlined()){
          $('.style a:nth-of-type(3)').addClass('active-style');
        }
        else {
          $('.style a:nth-of-type(3)').removeClass('active-style');
        }
    });
});
function selectionIsUnderlined() {
    var isUnderlined = false;
    if (document.queryCommandState) {
        isUnderlined = document.queryCommandState("underline");
    }
    return isUnderlined;
}


// Left Align Active - Icon Animation
jQuery(function($) {
    $('.wysiwyg-content,.wysiwyg-controls').click(function(){
        if(selectionIsAlignedLeft()){
          $('.active-align.top, .active-align.middle, .active-align.bottom').addClass('left-active');
					$('.active-align.top, .active-align.middle, .active-align.bottom').removeClass('right-active center-active');
        }
        else {
          
        }
    });
});
function selectionIsAlignedLeft() {
    var isAlignedLeft = false;
    if (document.queryCommandState) {
        isAlignedLeft = document.queryCommandState("justifyLeft");
    }
    return isAlignedLeft;
}


// Center Align Active - Icon Animation
jQuery(function($) {
    $('.wysiwyg-content,.wysiwyg-controls').click(function(){
        if(selectionIsAlignedCenter()){
          $('.active-align.top, .active-align.middle, .active-align.bottom').addClass('center-active');
					$('.active-align.top, .active-align.middle, .active-align.bottom').removeClass('left-active right-active');
        }
        else {
          
        }
    });
});
function selectionIsAlignedCenter() {
    var isAlignedCenter = false;
    if (document.queryCommandState) {
        isAlignedCenter = document.queryCommandState("justifyCenter");
    }
    return isAlignedCenter;
}


// Right Align Active - Icon Animation
jQuery(function($) {
    $('.wysiwyg-content,.wysiwyg-controls').click(function(){
        if(selectionIsAlignedRight()){
          $('.active-align.top, .active-align.middle, .active-align.bottom').addClass('right-active');
					$('.active-align.top, .active-align.middle, .active-align.bottom').removeClass('left-active center-active');
        }
        else {
          
        }
    });
});
function selectionIsAlignedRight() {
    var isAlignedRight = false;
    if (document.queryCommandState) {
        isAlignedRight = document.queryCommandState("justifyRight");
    }
    return isAlignedRight;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js