JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="page">

  <!-- Dashboard top bar -->
  <div class="dashboard-top-bar">
    <div class="dashboard-title">
      <h1>Dashboards</h1>
    </div>
    <div class="dashboard-actions">
      <button class="filter-toggler action" data-ripple><i class="fa fa-filter"></i></button>
      <button class="add new action" data-ripple><i class="fa fa-plus"></i> New Dashboard</button>
    </div>
  </div>

  <!-- Dashboard filters See JS functionality -->
  <div class="filters-toolbar">

    <!-- Filter by text -->
    <div class="filter-text" data-ripple>
      <div class="iconed-text-field">
        <i class="fa fa-filter icon"></i>
        <input type="text" id="filterByText" placeholder="Filter by text">
      </div>
    </div>

    <!-- Filter dropdown -->
    <div class="filter-dropdown">
      <a href="#!" class="action" data-ripple data-toggle="dropdown" data-target="#team-dropdown-list">
      Team <i class="fa fa-angle-down icon"></i>
      </a>

      <!-- Drop filters list -->
      <div id="team-dropdown-list" class="dropdown-list">
        
        <div class="dropdown-header">
          <div class="iconed-text-field search" >
            <i class="fa fa-search icon"></i>
            <input type="text" id="search" >
          </div>
        </div>
        
        <div class="dropdown-items">  
          <!-- Drop item -->
          <div class="drop-item">
            <div class="checkbox">
              <input type="checkbox" name="accountManagement" id="accountManagement">
              <label for="accountManagement">Account Management</label>
            </div>
          </div>

          <!-- Drop item -->
          <div class="drop-item">
            <div class="checkbox">
              <input type="checkbox" name="customerProfile" id="customerProfile">
              <label for="customerProfile">Customer Profile</label>
            </div>
   ...

SCSS

// Reset browser
* {box-sizing: border-box;margin: 0;padding: 0;}

//Fonts
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700');

// variables

$base-font:          'Raleway', sans-serif;
$base-font-size:      14px;

$type:               #212121;
$primary:            #1976D2;
$input-bg:           #eee;
 
 // General elements
 
 .page {
   padding: 30px;
   font-family: $base-font;
   font-size: $base-font-size;
   font-weight: 300;
 }
 
 .action {
   border: none;
   border-radius: 4px;
   padding: 9px 15px;
   line-height: 17px;
   cursor: pointer;
   outline: none;
   transition: all 0.15s ease-in;
   
   &:hover {
     box-shadow: 1px 2px 6px 0px rgba($type, 0.12);
   }
   
 }
 
 .iconed-text-field {
   position: relative;
   
    input {
      width: 100%;
      background: transparent;
      border: none;
      outline: none;
      position: relative;
      padding: 9px 15px 9px 35px;
      z-index: 1;
      
      &:focus {
        outline: none;
      }
    }
  
    .icon {
      position: absolute;
      left: 0;
      top: 0;
      padding: 9px 15px;
      line-height: 17px;
      pointer-events: none;
      z-index: 2;
    }
 }
 
 .checkbox {
    width: 100%;
    position: relative;
    input {
        position: absolute;
        opacity: 0;
        top: 0;
        left: 0;
        width: 17px;
        height: 17px;
        display: block;
        padding: 0;
        z-index: 10;
        pointer-events: none;
    }
    label {
        display: block;
        padding-left: 24px;
        line-height: 17px;
        user-select: none;
        cursor: pointer;
        &:before {
            content: "✓";
            display: flex;
            width: 17px;
            height: 17px;
            border: 1px solid $type;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            position: absolute;
            left: -1px;
            top: -1px;
            background: $type;
           ...

JavaScript

// define filters toolbar open btn
const  openFilters = $('.filter-toggler');

// define filters tolbar close btn
const  closeFilters = $('.filter-close');

// define filters toolbar 
const filterBar = $('.filters-toolbar');


// open filters bar
openFilters.on('click', function(){
	$('.dropdown-list').removeClass('opened');
	filterBar.toggleClass('opened');
});

//close filters bar
closeFilters.on('click', function(){
	$('.dropdown-list').removeClass('opened');
	filterBar.toggleClass('opened');
});


// open close dropdown
$('[data-toggle="dropdown"]').on('click', function(){
	var toOpen = $(this).attr('data-target'); 
  $(toOpen).toggleClass('opened');
});

// clear search form
$('.clear').on('click', function() {
	$(this).parents('.dropdown-list').find('[type="text"]').val('');
  $(this).parents('.dropdown-list').find('[type="checkbox"]').prop('checked', false);
});

// close dropdown on close anywhere except dropdown and it's children
$(document).click(function (e) {
    var container = $(".filter-dropdown");

    //check if the clicked area is dropDown or not
    if (container.has(e.target).length === 0) {
        $('.dropdown-list').removeClass('opened');
    }
});



// material design data-ripple
$('[data-ripple]').on('click', function (event) {
      event.preventDefault();
      
      var $div = $('<div/>'),
          btnOffset = $(this).offset(),
      		xPos = event.pageX - btnOffset.left,
      		yPos = event.pageY - btnOffset.top;
      

      
      $div.addClass('ripple-effect');
      var $ripple = $(".ripple-effect");
      
      $ripple.css("height", $(this).height());
      $ripple.css("width", $(this).height());
      $div
        .css({
          top: yPos - ($ripple.height()/2),
          left: xPos - ($ripple.width()/2),
          background: $(this).data("ripple-color")
        }) 
        .appendTo($(this));

      window.setTimeout(function(){
        $div.remove();
      }, 1400);
    });