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 clearfix">
          <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 clearfix">
            <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">
    ...

SCSS

$Brdr: #7d868c;
.notaList,.people-glossary{
	padding: 0;
	margin: 0;
	list-style: none;
}
// CODE
.people-glossary{
  //@extend .notaList !optional;
	position: relative;
	li{
		list-style: none;
		padding: 0;
		margin: 0;
		display: block;
		width: 42px;
		height: 42px;
		float: left;
		text-align: center;
		line-height: 42px;
		border-bottom: dotted 1px $Brdr ;
		font-size: 16px;
		cursor: pointer;
		&+li{
			border-left: $Brdr 1px dotted;
		}
		&:first-child{
			border-left: dotted 1px $Brdr ;
		}
		&:before{
			top: 0px;
			left: 0px;
			content: ' ';
			width: 1px;
			height: 100%;
			background: #f00;
		}
	
		&:after{
			top: 0px;
			left: 0px;
			line-height: 1em;
			font-size: 12px;
			color: #f00;
			position: absolute;
			content: ' ';
			background: #fff;
			height: 100%;
			width: 1px;
		}
	}
	&:before{
		left: 0px;
		bottom: 0px;
		z-index: 1;
		width: 100%;
		height: 1px;
		content: ' ';
		position: absolute;
		background: #fff;
	}
}

.people-search .people-glossary li{
	width: 38px;
	height: 30px;
	line-height: 30px;
}