JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<div class="panel">
  <!-- <i class="material-icons">vertical_split</i> -->
  <span class="icon-group">
                    <i onclick="javascript:window.showCommentsLeft()" class="showCommentsLeft icon-image-preview outline-vertical_split rotate_180 selected" title="Show comment section on the left"></i>
                    <i onclick="javascript:window.hideComments()" class="hideComments icon-image-preview outline-view_headline" title="Hide comment section"></i>
                    <i onclick="javascript:window.showCommentsRight()" class="showCommentsRight icon-image-preview outline-vertical_split" title="Show comment section on the right"></i>
                </span>
  <span class="icon-group">
                    <i onclick="" class="undo icon-image-preview outline-undo" title="Undo actions"></i>
                    <i onclick="" class="redo icon-image-preview outline-redo" title="Redo actions"></i>
                </span>
  <span class="icon-group" style="
">
<i class="material-icons icon-image-preview" style="
    font-size: 24px;
    color: #333333d6;
    clear: both;
">format_bold</i>
                    <i class="material-icons icon-image-preview" style="
    font-size: 24px;
    color: #333333d6;
    clear: both;
">format_italic</i><i class="material-icons icon-image-preview" style="
    font-size: 24px;
    color: #333333d6;
    clear: both;
">format_underlined</i>
</span>
  <span class="icon-group">   
                <i onclick="" class="format format-color-text icon-image-preview outline-format_color_text format-extra-space" title="Format Text Colour"></i><i onclick="" class="format format-color-fill icon-image-preview outline-format_color_fill format-extra-space" title="Format Background Colour"></i></span></div>