JSFiddle - React, Tailwind, and code Playground

by nickcoutsos

HTML

<h2>Tiefling Name Generator <button>Generate</button></h2>
<div class="container">
  <div class="prefixes">
    <h3><input type="checkbox" class="toggleList" data-list="prefixes" /> Prefixes</h3>
    <ul></ul>
  </div>
  <div class="suffixes">
    <h3><input type="checkbox" class="toggleList" data-list="suffixes" /> Suffixes</h3>
    <ul></ul>
  </div>
  <div class="results">
    <h3>Results</h3>
    <ul></ul>
  </div>
</div>

CSS

html,
body {
  font-family: sans-serif;
  background: transparent;
  color: white;
}

.container {
  display: flex;
  flex-direction: row;
}

.container div {
  margin: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 5px
}

JavaScript

const ideals = [
  'Achievement',
  'Adventure',
  'Aid',
  'Anguish',
  'Art',
  'Ashes',
  'Atonement',
  'Awe',
  'Bliss',
  'Bright',
  'Carrion',
  'Chant',
  'Cheer',
  'Cherish',
  'Closed',
  'Comfort',
  'Compassion',
  'Confidence',
  'Content',
  'Courage',
  'Cunning',
  'Darkness',
  'Deceit',
  'Delight',
  'Desire',
  'Despair',
  'Devotion',
  'Dexterity',
  'Different',
  'Dread',
  'Ecstasy',
  'End',
  'Enduring',
  'Essential',
  'Esteem',
  'Eternal',
  'Euphoria',
  'Exceptional',
  'Exciting',
  'Expert',
  'Expertise',
  'Expressive',
  'Extreme',
  'Faith',
  'Fear',
  'Flawed',
  'Free',
  'Freedom',
  'Fresh',
  'Gentle',
  'Gladness',
  'Glee',
  'Gloom',
  'Happiness',
  'Happy',
  'Harmony',
  'Hatred',
  'Hero',
  'Hope',
  'Hunt',
  'Hymn',
  'Ideal',
  'Immortal',
  'Innovation',
  'Interesting',
  'Journey',
  'Joy',
  'Laughter',
  'Life',
  'Light',
  'Love',
  'Loyal',
  'Mantra',
  'Master',
  'Mastery',
  'Misery',
  'Music',
  'Normal',
  'Nowhere',
  'Odd',
  'Open',
  'Optimal',
  'Panic',
  'Perfect',
  'Piety',
  'Pleasure',
  'Poetry',
  'Possession',
  'Promise',
  'Psalm',
  'Pure',
  'Quest',
  'Random',
  'Rare',
  'Recovery',
  'Redemption',
  'Regular',
  'Relentless',
  'Respect',
  'Reverence',
  'Sadness',
  'Sanctity',
  'Silence',
  'Skilled',
  'Sly',
  'Song',
  'Sorrow',
  'Suffering',
  'Terror',
  'Timeless',
  'Torment',
  'Trickery',
  'Trouble',
  'Trust',
  'Truth',
  'Uncommon',
  'Unlocked',
  'Void',
  'Voyage',
  'Weary',
  'Winning',
  'Woe'
]
const malePrefixes = [
  'Aet',
  'Ak',
  'Am',
  'Aran',
  'And',
  'Ar',
  'Ark',
  'Bar',
  'Car',
  'Cas',
  'Dam',
  'Dhar',
  'Eb',
  'Ek',
  'Er',
  'Gar',
  'Gu',
  'Gue',
  'Hor',
  'Ia',
  'Ka',
  'Kai',
  'Kar',
  'Kil',
  'Kos',
  'Ky',
  'Loke',
  'Mal',
  'Male',
  'Mav',
  'Me',
  'Mor',
  'Neph',
  'Oz',
  'Ral',
  'Re',
  'Rol',
  'Sal',
  'Sha',
  'Sir',
  'Ska',
  'The',
  'Thy',
  'Thyne',
  'Ur',
  'Uri',
  'Val',
  'Xar',
  'Zar',
 ...