JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<span style="float:left; padding-right: 5px;">
    <span class="noselectXXX" style="display:block;">Harvard</span>
    <span>John Smith</span>
  </span>

  <span style="float:left; padding-right: 5px;">
    <span class="noselectXXX" style="display:block;">Chicago</span>
    <span>Tucker Max</span>
  </span>

  <span style="float:left; padding-right: 5px;">
    <span class="noselectXXX" style="display:block;"></span>
    <span>Rihanna</span>
  </span>

  <span style="float:left; padding-right: 5px;">
    <span class="noselectXXX" style="display:block;">NYU</span>
    <span>Peter Simpson</span>
  </span>



<hr /><hr />
<ul>
<li><span class="noselectXXX" style="display:block;">Harvard 2</span><span>John Smith</span></li>
<li><span class="noselectXXX" style="display:block;">Chicago</span><span>Tucker Max</span></li>
<li><span class="noselectXXX" style="display:block;"></span><span>Rihanna</span></li>
<li><span class="noselectXXX" style="display:block;">NYU</span><span>Peter Simpson</span></li>
  </ul>

CSS

.noselect{
-webkit-user-select: none !important;  /* Chrome 49+ */
user-select: none !important;          /* Likely future */
}

.noselectXXX {
    -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */ 
}



li {
  float: left;
  padding-right: 5px;
}