JSFiddle - React, Tailwind, and code Playground

by Ajith S Punalur

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-6">
      Style 1
    </div>
    <div class="col-sm-12 col-md-6 col-lg-6">
      <div class="home-people">
        <ul class="people-glossary">
          <li>A</li>
          <li>B</li>
          <li>C</li>
          <li>D</li>
          <li>E</li>
          <li>F</li>
          <li>G</li>
          <li>H</li>
          <li>I</li>
          <li>J</li>
          <li>K</li>
          <li>L</li>
          <li>M</li>
          <li>N</li>
          <li>O</li>
          <li>P</li>
          <li>Q</li>
          <li>R</li>
          <li>S</li>
          <li>T</li>
          <li>U</li>
          <li>V</li>
          <li>W</li>
          <li>X</li>
          <li>Y</li>
          <li>Z</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6">
      Style 02
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6">
      <div class="itemid-624">
        <div class="people-search">
          <ul class="people-glossary">
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>E</li>
            <li>F</li>
            <li>G</li>
            <li>H</li>
            <li>I</li>
            <li>J</li>
            <li>K</li>
            <li>L</li>
            <li>M</li>
            <li>N</li>
            <li>O</li>
            <li>P</li>
            <li>Q</li>
            <li>R</li>
            <li>S</li>
            <li>T</li>
            <li>U</li>
            <li>V</li>
            <li>W</li>
            <li>X</li>
            <li>Y</li>
            <li>Z</li>
          </ul>
        </div>
      </div>
    </div>
  </div>


  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6">
      Style 03
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6">
      <div...

SCSS

$gray: #7d868c;
.people-search{	
	.people-glossary{
		list-style:none;
		margin:20px 0 35px 0;
		padding:0;
		overflow:hidden;
		li{
			list-style: none;
			padding: 0;
			margin: 0;
			float: left;
			display: block;
			width: 38px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			border-bottom: dotted 1px $gray;
			border-right: dotted 1px $gray;
			font-size: 16px;
			cursor:pointer;
			&:nth-child(6n+6) { 
				border-right:none;
			}
			&:last-child{border-right:none;}
			&:last-child, &:nth-last-child(2),&:nth-last-child(3) {    
				border-bottom:none;
			}
		}
	}
}
.itemid-624{
	.people-search{	
		.people-glossary{
			list-style:none;
			margin:20px 0 35px 0;
			padding:0;
			overflow:hidden;
			li{
				list-style: none;
				padding: 0;
				margin: 0;
				float: left;
				display: block;
				width: 38px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				border-bottom: dotted 1px $gray;
				border-right: dotted 1px $gray;
				font-size: 16px;
				cursor:pointer;
				&:nth-child(14n+14) {    
					border-right:none;
				}
				&:last-child{border-right:none;}
				&:last-child, &:nth-last-child(2),&:nth-last-child(3) {    
					border-bottom:none;
				}
			}
			li:nth-last-child(4),li:nth-last-child(5),li:nth-last-child(6),li:nth-last-child(7),li:nth-last-child(8),li:nth-last-child(9),li:nth-last-child(10),
			li:nth-last-child(11),li:nth-last-child(12){
				border-bottom:none !important;
			}
		}
	}
}

.home-people{
	.people-glossary{
		list-style:none;
		margin:20px 0 35px 0;
		padding:0;
		overflow:hidden;
		li{
			list-style: none;
			padding: 0;
			margin: 0;
			float: left;
			display: block;
			width: 42px;
			height: 42px;
			text-align: center;
			line-height: 42px;
			border-bottom: dotted 1px $gray;
			border-right: dotted 1px $gray;
			font-size: 16px;
			cursor:pointer;
			&:last-child{border-right:none;}
			&:last-child,...