JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<button onclick='showResult()'>
Ver listas
</button>
<div class='ss-vl-container'>
  <div class='ss-vl'>
    <div class='menu'>
      <div class='search'>
        <input id='idsearchList1' placeholder='Buscar...'>
      </div>
      <div class='btn' id='selectAll1'>
        <i class="material-icons">arrow_forward</i>
      </div>
      <!--
      <div class='btn' id='deselectAll1'>
        <i class="material-icons">crop_din</i>
      </div>
      -->
    </div>
    <div id='lista1'></div>
  </div>
  <div class='ss-vl'>
   <div class='menu'>
      <div class='search'>
        <input id='idsearchList2' placeholder='Buscar...'>
      </div>
      <div class='btn' id='selectAll2'>
        <i class="material-icons">arrow_back</i>
      </div>
      <!--
      <div class='btn' id='deselectAll1'>
        <i class="material-icons">crop_din</i>
      </div>
      -->
    </div>
    <div id='lista2'></div>
  </div>
</div>

SCSS

.ss-vl-container {
  
  display: flex;
  justify-content: space-between;
  flex-direction: row;

  .menu {
    background-color: 'red';
    display: flex;
    justify-content: flex-start;
  }

  .ss-vl {
    border: 1px solid black;
    flex: 50%
  }

  .btn {
    width: 25px;
    height: 25px;
    margin: 5px;
    text-align: center;
    border: 1px solid gray;
    cursor: pointer;
  }

  .search {
    margin: 5px;

    input {
      height: 20px;
    }
  }
  .vrow {
    height: 45px;
    width: 100%;
line-height: 45px;
  }
  .vrow:hover {
    background-color: #08c;
    color: #fff;
  }
}

JavaScript

(function(f) {
  if (typeof exports === "object" && typeof module !== "undefined") {
    module.exports = f()
  } else if (typeof define === "function" && define.amd) {
    define([], f)
  } else {
    var g;
    if (typeof window !== "undefined") {
      g = window
    } else if (typeof global !== "undefined") {
      g = global
    } else if (typeof self !== "undefined") {
      g = self
    } else {
      g = this
    }
    g.HyperList = f()
  }
})(function() {
  var define, module, exports;
  return (function() {
    function r(e, n, t) {
      function o(i, f) {
        if (!n[i]) {
          if (!e[i]) {
            var c = "function" == typeof require && require;
            if (!f && c) return c(i, !0);
            if (u) return u(i, !0);
            var a = new Error("Cannot find module '" + i + "'");
            throw a.code = "MODULE_NOT_FOUND", a
          }
          var p = n[i] = {
            exports: {}
          };
          e[i][0].call(p.exports, function(r) {
            var n = e[i][1][r];
            return o(n || r)
          }, p, p.exports, r, e, n, t)
        }
        return n[i].exports
      }
      for (var u = "function" == typeof require && require, i = 0; i < t.length; i++) o(t[i]);
      return o
    }
    return r
  })()({
    1: [function(_dereq_, module, exports) {
      'use strict';

      // Default configuration.

      Object.defineProperty(exports, "__esModule", {
        value: true
      });

      var _createClass = function() {
        function defineProperties(target, props) {
          for (var i = 0; i < props.length; i++) {
            var descriptor = props[i];
            descriptor.enumerable = descriptor.enumerable || false;
            descriptor.configurable = true;
            if ("value" in descriptor) descriptor.writable = true;
            Object.defineProperty(target, descriptor.key, descriptor);
          }
        }
        return function(Constructor, protoProps, staticProps) {
          if...