JSFiddle - React, Tailwind, and code Playground

by kuonyuu

CSS

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --select-text-bg-color: #B5D6FC;
  --select-text-font-color: auto;
  --monospace: "Lucida Console", Consolas, "Courier", monospace
}

html {
  font-size: 14px;
  background-color: #fff;
  background-color: var(--bg-color);
  color: #333;
  color: var(--text-color);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased
}

body {
  margin: 0;
  padding: 0;
  height: auto;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  font-size: 1rem;
  line-height: 1.42857143;
  overflow-x: hidden;
  background: inherit
}

iframe {
  margin: auto
}

a.url {
  word-break: break-all
}

a:active,
a:hover {
  outline: 0
}

.in-text-selection,
::selection {
  background: #B5D6FC;
  text-shadow: none;
  background: var(--select-text-bg-color);
  color: var(--select-text-font-color)
}

#write {
  margin: 0 auto 0;
  height: auto;
  width: inherit;
  word-break: normal;
  word-wrap: break-word;
  position: relative;
  white-space: normal;
  overflow-x: visible;
  padding-top: 40px
}

#write.first-line-indent p {
  text-indent: 2em
}

#write.first-line-indent li p,
#write.first-line-indent p * {
  text-indent: 0
}

#write.first-line-indent li {
  margin-left: 2em
}

.for-image #write {
  padding-left: 8px;
  padding-right: 8px
}

body.typora-export {
  padding-left: 30px;
  padding-right: 30px
}

.typora-export .footnote-line,
.typora-export li,
.typora-export p {
  white-space: pre-wrap
}

@media screen and (max-width:500px) {
  body.typora-export {
    padding-left: 0;
    padding-right: 0
  }
  .CodeMirror-sizer {
    margin-left: 0 !important
  }
  .CodeMirror-gutters {
    display: none !important
  }
}

#write li>figure:first-child {
  margin-top: -20px
}

#write ol,
#write ul {
  position: relative
}

img {
  max-width: 100%;
  vertical-align: middle
}

button,
input,
select,
textarea {
  font-size: inherit;
  color: inherit;
  font:...