JSFiddle - React, Tailwind, and code Playground

by CookieJon

HTML

<div><pre id=O></div>

CSS

body {
  background: #e2e1e0;
  xtext-align: center;
}

div {
  background: #fff;
  padding: 20px;
  border-radius: 2px;
  display: inline-block;
  margin: 1rem;
  position: relative;
}

pre {
      white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

div {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.card-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

JavaScript

_={log:(...v)=>O.innerHTML+=v.join(', ')+'\n',cls:O.innerHTML=''}
console.clear()

S=d=>(x={},l=99,h=s=0,[...d].map(v=>x[v]=-~x[v]),Object.keys(x).map(v=>(c=91-v.charCodeAt(),t=x[v],s+=1e4**t,c<x[t]?0:x[t]=c,g=(h=c>h?c:h)-(l=c<l?c:l))),[5,4,3,2,1].map(v=>s+=0|x[v]**v),s+(s<5e7&&g<5?1e13:0)),C=a=>b=>(S(a)>S(b)?a:b)

/*
S=d=>(x={},l=99,h=s=0,
  d.replace(/./g,v=>x[v]=(x[v]|0)+1),	// x['char'].value = # of chars in string
  Object.keys(x).map(v=>(		// for each char...
    c=91-v.charCodeAt(0),   // get its score: a=26 > z=1
    t=x[v],									// get the count of that char
    s+=1e4**t,							// increase score exponentially for bigger groups
    c<x[t]?0:x[t]=c,				// store best char for each group size
    g=(h=c>h?c:h)-(l=c<l?c:l)  // diff btwn highest and lowest char in whole string
  ))
  ,[5,4,3,2,1].map(v=>s+=x[v]?x[v]**v:0) // incrs score exp. for best char in bigger groups
  ,console.log(d,x,s)
  ,s+(s<5e7&&g<5?1e13:0) // bump up the score for straights
),
C=(a,b)=>(S(a)>S(b)?a:b) // score 2 strings and return the higher string
*/

o=''
o+=C('STRUQ')('AAABB')+'\n'  //QRSTU     because a straight beats 3 of a kind
o+=C('VOVIU')('KJSDF')+'\n'  //VOVIU     because a pair beats nothing 
o+=C('OPOQO')('UPPER')+'\n'  //OPOQO     because 3 of a kind beats a pair
o+=C('WOOOO')('GGEGG')+'\n'  //GGEGG     because 4 Gs beats 4 Os
o+=C('QUEUE')('HOPUP')+'\n'  //QUEUE     because 2 pairs beats 1 pair
o+=C('LODPL')('DDKOP')+'\n'  //DDKOP     because pair DD beats pair LL
o+=C('HUHYG')('HIJHT')+'\n'  //HUHYG     both have pair HH, but G beats I
o+=C('DDFFH')('CCYYZ')+'\n'  //CCYYZ     both have 2 pairs, but CC(yyz) beats DD(ffh)
o+=C('QTERY')('RETYQ')+'\n'  //QTERY     identical! so doesnt matter
o+=C('ABEDC')('VYXWZ')+'\n'  //ABEDC     because it is a "higher" straight
o+=C('ABBBB')('ZZZZZ')+'\n'  //ZZZZZ     because nothing beats 5 of a kind
o+=C('AAAAA')('ZZZZZ')+'\n'  //AAAAA     A beats Z

_.log(o)