JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<div class="container">

 <div class="widget" id="manage-crew-members">
    <div class="widget-header">
      
      <h3>Poke Team</h3>
      <div class="widget-actions">
        <button type="button" class="btn btn-default btn-small" id="toggle-crew-select-modal"><i class="ri-user-add-line"></i></button>
      </div>
      
    </div>
    <div class="widget-content">
    
      <ul class="crewmember-list"></ul>
      
    </div>
  </div>

</div>

CSS

@import url('//fonts.googleapis.com/css?family=Montserrat:300,300i,400,600,700|Sanchez&display=swap');

ul, li{
  margin:0;
  padding:0;
  list-style: none;
}


.container{
 padding:0.5rem;
 margin:0.5rem;
 display:flex;
 width:auto;
 font-family:'Montserrat', 'Sans Serif';
}
.widget{
  display:flex;
  flex:1;
  flex-direction:column;  
  border:1px solid rgba(0,0,0,.2);
  border-radius:3px;
}

.widget .widget-header{
  flex:0 0 auto;
  display:flex;
 align-items:center;
 background-color:rgba(0,0,0,.05);
 border-bottom:1px solid rgba(0,0,0,.2);
}

.widget .widget-header h3{
  flex:1;
  font-size:1rem;
  margin:0;
  padding:0.25rem;
}
.widget .widget-header .widget-actions{
  flex:0;
  display:flex;
  align-items:center;
}

#manage-crew-members .widget-header .btn:not(:first-of-type) {
  margin-left: 0.25rem;
}

#manage-crew-members .widget-header .widget-actions{
  padding-right:0.25rem;
}

#manage-crew-members .crewmember-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  
  padding: 1rem;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}


#manage-crew-members .crewmember-list .btn.btn-default {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 height:3.5rem;
 width:3.5rem;
  margin-right: 0.6rem;
  margin-bottom:0.6rem;
  box-shadow: 0 0 0 0.12rem rgba(0, 0, 0, 0.2);
  overflow:hidden;
  transition: box-shadow 0.25s cubic-bezier(0, 0, 0.2, 1);
}

#manage-crew-members .crewmember-list .btn:hover,
#manage-crew-members .crewmember-list .btn:focus{
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.06);
}

#manage-crew-members .crewmember-list .btn .ri {
  font-size: 1.4rem; 
}
#manage-crew-members .crewmember-list .btn .ri::before{
   font-family:'Remixicon';
}

#manage-crew-members .crewmember-list .btn span:last-child {
  font-size: 0.6rem;
  padding-top: 0.1rem;
}

#manage-crew-members .crewmember-list .btn[data-user-type="follow"] .ri::before{
 content:...

JavaScript

//Crew Manager Module:
const crewManager = {
  "debug": false
};

// initialize module settings:
crewManager.init = function(container) {

  if (typeof container !== "undefined" || container instanceof jQuery) {

    //populate current crew
    crewManager.crewListBuilder(container);

    //generate modal for selection 
    crewManager.crewModalBuilder();

    // adding/removing/binds 
    crewManager.bindings(container);


  } else {
    console.warn("[crewlist] no crew manager container");
    return false;
  }

};



crewManager.crewListBuilder = function(container) {

  if (crewManager.debug) {
    console.log("[crewManager] crewListBuilder");
  }


  crewManager.crewList = container.find('.crewmember-list');
  crewManager.crew = [];

  // fetching fictional  PokeMon crew :)
  fetch('https://pokeapi.co/api/v2/pokemon?limit=16')
    .then(response => response.json())
    .then(function(allPokemon) {
    
     var clist = "";

      allPokemon.results.forEach(function(pokemon) {
       
        var crewImage;
       
		
      
        fetchPokemonData(pokemon, function(details) {
        
        if (details && details.name === pokemon.name) {
        
               
            crewImage = 'https://pokeres.bastionbot.org/images/pokemon/' + details.id + '.png';
            
            crewManager.crew.push({
              "id": details.id,
              "name": pokemon.name,
              "img": crewImage
            });
            
            
            
                
        
            

          } else {
            console.log('failed details');
          }
    
      
         
       


        });
        
             

      });
      
       crewManager.crew.forEach(function(member, index) {
            clist += '<li><button type="button" name="' + member.name + '" data-image="' + member.img + '" data-crew-id="' + index + '" class="btn btn-default"><span>' + member.name + '</span></button></li>';
          });

...