<style dangerouslySetInnerHTML={{__html: `
@import url('https://fonts.googleapis.com/css?family=Abel');
html, body {
  background: #23272A;
  font-family: Abel, Arial, Verdana, sans-serif;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
}
.new .card {
  width: 450px !important;
  height: 250px !important;
  background-color: #fff !important;
  background: linear-gradient(#2C2F33, #2C2F33) !important;
  box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 1.5rem !important;
  color: white !important;
}

.new .card h1 {
  text-align: center !important;
}

.new .card .additional {
  position: absolute !important;
  width: 150px !important;
  height: 100% !important;
  background: linear-gradient(#7289DA, #7289DA) !important;
  transition: width 0.4s !important;
  overflow: hidden !important;
  z-index: 2 !important;
}


.new .card:hover .additional {
  width: 100% !important;
  border-radius: 0 5px 5px 0 !important;
}

.new .card .additional .user-card {
  width: 150px !important;
  height: 100% !important;
  position: relative !important;
  float: left !important;
}

.new .card .additional .user-card::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 10% !important;
  right: -2px !important;
  height: 80% !important;
  border-left: 2px solid rgba(0,0,0,0.025) !important;
}

.new .card .additional .user-card .level,
.new .card .additional .user-card .points {
  top: 15% !important;
  color: #fff !important;
  text-transform: uppercase !important;
  font-size: 0.75em !important;
  font-weight: bold !important;
  background: rgba(0,0,0,0.15) !important;
  padding: 0.125rem 0.75rem !important;
  border-radius: 100px !important;
  white-space: nowrap !important;
}

.new .card .additional .user-card .points {
  top: 85% !important;
}

.new .card .additional .user-card img {
    border-radius: 50% !important;
}

.new .card .additional .more-info {
  width: 300px !important;
  float: left !important;
  position: absolute !important;
  left: 150px !important;
  height: 100% !important;
}

.new .card .additional .more-info h1 {
  color: #fff !important;
  margin-bottom: 0 !important;
}

.new .card .additional .coords {
  margin: 0 1rem !important;
  color: #fff !important;
  font-size: 1rem !important;
}

.new .card .additional .coords span + span {
  float: right !important;
}

.new .card .additional .stats {
  font-size: 2rem !important;
  display: flex !important;
  position: absolute !important;
  bottom: 1rem !important;
  left: 1rem !important;
  right: 1rem !important;
  top: auto !important;
  color: #fff !important;
}

.new .card .additional .stats > div {
  flex: 1 !important;
  text-align: center !important;
}

.new .card .additional .stats i {
  display: block !important;
}

.new .card .additional .stats div.title {
  font-size: 0.75rem !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
}

.new .card .additional .stats div.value {
  font-size: 1.5rem !important;
  font-weight: bold !important;
  line-height: 1.5rem !important;
}

.new .card .additional .stats div.value.infinity {
  font-size: 2.5rem !important;
}

.new .card .general {
  width: 300px !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  padding: 1rem !important;
  padding-top: 0 !important;
}

.new .card .general .more {
  position: absolute !important;
  bottom: 1rem !important;
  right: 1rem !important;
  font-size: 0.9em !important;
}
`}} />
        <div className="new">
        <div className="card">
          <div className="additional">
            <div className="user-card">
              <div className="level center">
                8,131 Votes
              </div>
              <div className="points center">
                2,313,319 Servers
              </div>
              <img width="110" height="110" src="https://cdn.discordapp.com/avatars/159985870458322944/b50adff099924dd5e6b72d13f77eb9d7.png?size=512" role="img" aria-labelledby="title desc" className="center">

              </img>
            </div>
            <div className="more-info">
              <h1>Mee6</h1>
              <div className="coords">
                <span>Added</span>
                <span>January 1st, 2019</span>
              </div>
              <div className="coords">
                <span>Owner</span>
                <span>Sil#5262</span>
              </div>
              <div className="stats">
                <div>
                  <div className="title">Servers</div>
                  <div className="value">2,313,319</div>
                </div>
                <div>
                  <div className="title">Stars</div>
                  <div className="value">4</div>
                </div>
                <div>
                  <div className="title">Votes</div>
                  <div className="value">12,131</div>
                </div>
              </div>
            </div>
          </div>
          <div className="general">
            <h1>Mee6</h1>
            <p>Mee6 is a very user-friendly bot with a beautiful dashboard.</p>
            <span className="more">Mouse over the card for more info</span>
        </div>
        </div>
        <div className="card">
          <div className="additional">
            <div className="user-card">
              <div className="level center">
                8,131 Votes
              </div>
              <div className="points center">
                2,313,319 Servers
              </div>
              <img width="110" height="110" src="https://cdn.discordapp.com/avatars/159985870458322944/b50adff099924dd5e6b72d13f77eb9d7.png?size=512" role="img" aria-labelledby="title desc" className="center">

              </img>
            </div>
            <div className="more-info">
              <h1>Mee6</h1>
              <div className="coords">
                <span>Added</span>
                <span>January 1st, 2019</span>
              </div>
              <div className="coords">
                <span>Owner</span>
                <span>Sil#5262</span>
              </div>
              <div className="stats">
                <div>
                  <div className="title">Servers</div>
                  <div className="value">2,313,319</div>
                </div>
                <div>
                  <div className="title">Stars</div>
                  <div className="value">4</div>
                </div>
                <div>
                  <div className="title">Votes</div>
                  <div className="value">12,131</div>
                </div>
              </div>
            </div>
          </div>
          <div className="general">
            <h1>Mee6</h1>
            <p>Mee6 is a very user-friendly bot with a beautiful dashboard.</p>
            <span className="more">Mouse over the card for more info</span>
        </div>
        </div>
        <div className="card">
          <div className="additional">
            <div className="user-card">
              <div className="level center">
                8,131 Votes
              </div>
              <div className="points center">
                2,313,319 Servers
              </div>
              <img width="110" height="110" src="https://cdn.discordapp.com/avatars/159985870458322944/b50adff099924dd5e6b72d13f77eb9d7.png?size=512" role="img" aria-labelledby="title desc" className="center">

              </img>
            </div>
            <div className="more-info">
              <h1>Mee6</h1>
              <div className="coords">
                <span>Added</span>
                <span>January 1st, 2019</span>
              </div>
              <div className="coords">
                <span>Owner</span>
                <span>Sil#5262</span>
              </div>
              <div className="stats">
                <div>
                  <div className="title">Servers</div>
                  <div className="value">2,313,319</div>
                </div>
                <div>
                  <div className="title">Stars</div>
                  <div className="value">4</div>
                </div>
                <div>
                  <div className="title">Votes</div>
                  <div className="value">12,131</div>
                </div>
              </div>
            </div>
          </div>
          <div className="general">
            <h1>Mee6</h1>
            <p>Mee6 is a very user-friendly bot with a beautiful dashboard.</p>
            <span className="more">Mouse over the card for more info</span>
        </div>
        </div>
        <div className="card">
          <div className="additional">
            <div className="user-card">
              <div className="level center">
                8,131 Votes
              </div>
              <div className="points center">
                2,313,319 Servers
              </div>
              <img width="110" height="110" src="https://cdn.discordapp.com/avatars/159985870458322944/b50adff099924dd5e6b72d13f77eb9d7.png?size=512" role="img" aria-labelledby="title desc" className="center">

              </img>
            </div>
            <div className="more-info">
              <h1>Mee6</h1>
              <div className="coords">
                <span>Added</span>
                <span>January 1st, 2019</span>
              </div>
              <div className="coords">
                <span>Owner</span>
                <span>Sil#5262</span>
              </div>
              <div className="stats">
                <div>
                  <div className="title">Servers</div>
                  <div className="value">2,313,319</div>
                </div>
                <div>
                  <div className="title">Stars</div>
                  <div className="value">4</div>
                </div>
                <div>
                  <div className="title">Votes</div>
                  <div className="value">12,131</div>
                </div>
              </div>
            </div>
          </div>
          <div className="general">
            <h1>Mee6</h1>
            <p>Mee6 is a very user-friendly bot with a beautiful dashboard.</p>
            <span className="more">Mouse over the card for more info</span>
        </div>
        </div>
        </div>