Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                 <div id="app"></div>
              
            
!

CSS

              
                :root {
  --headingFont: "";
  --bodyFont: "";
  --headingFont-size: 32px;
  --bodyFont-size: 18px;
  --headingFont-size--big: 38px;
  --bodyFont-size--big: 20px;
}

* {
  box-sizing: border-box;
  outline: none;
}

html,
body,
#app {
  height: 100%;
  width: 100%;
}

body {
  background: #1a1c21;
}

.app {
  opacity: 0;
  transition: transform .7s, opacity .7s;
  transform: translateY(-16px);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0px;
  display: flex;
  color: #fff;
  background: #1a1c21;
  &.show {
    opacity: 1;
    transform: translateY(0);
  }
  &-light {
    transition: none;
    background: #fff;
    color:#5a5a5a;
    .sidebar,
    .font-title {
      border-color: #ececec;
    }
    .font-name {
      color: #5a5a5a;
    }
    .font-type {
      color: #c7c7c7;
    }
    .font-sizes > span {
      border-color: #e6e6e6;
      color: #d4d4d4;
      &:hover {
        color: darken(#d4d4d4,10%);
        border-color: darken(#e6e6e6,10%);
        &:after {
          color: darken(#d4d4d4,10%);
        }
      }
    }
    .font-random svg {
      fill: #c5c5c5;
    }
    .font-title,
    .random-col label {
      color: #c7c7c7;
    }
    .random-col select {
      border-color: #e6e6e6;
      background: #fff;
      color: #5a5a5a;
      &:focus {
        border-color: darken(#e6e6e6, 10%);
      }
    }
    .font.for-heading .font-icon {
      background: #fef4d8;
      color: #5a5a5a;
    }
    .font.for-body .font-icon {
      background: #ffe8e8;
      color: #5a5a5a;
    }
    .random-button button {
      border-color: rgba(210, 210, 210, 0.47);
      background: rgba(55, 61, 70, 0.05);
      color: #b1b1b1;
      transition: 0s;
      &:hover {
        border-color: darken(#d2d2d2, 1%);
        background: darken(#f1f1f1, 1%);
        color: #5a5a5a;
        transition: .3s;
      }
    }
    .random-button.for-use button {
      border-color: rgba(210, 210, 210, 0.47);
      background: rgba(55, 61, 70, 0.05);
      &:hover {
        border-color: darken(#d2d2d2, 1%);
        background: darken(#f1f1f1, 1%);
        color: #5a5a5a;
      }
    }
    .card-post {
      background-image:url(https://images.unsplash.com/photo-1495921015075-c888398b885e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8205788738c7568db7f4de080704da9d&auto=format&fit=crop&w=671&q=80);
      &:after {
        background:rgba(255, 255, 255, 0.8)
      }
      p {
        color: rgba(#5a5a5a, .6);
      }
    }
    .card-heading {
         background: rgba(255, 230, 231, 0.55);
      p {
        color: #c3afb1;
      }
    }
    .card-body {
      background: rgb(255, 251, 242);
      p {
        color: #bdb6a6;
      }
    }
    .card-default {
      background: rgba(236, 236, 236, 0.3);
      p {
        color: #b1b1b1;
      }
    }
  }
}

.flex {
  &-column {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  &-content {
    flex-grow: 1;
    overflow-y: auto;
  }
}

.sidebar {
  flex-shrink: 0;
  width: 360px;
  border-right: 1px solid #27292f;
  font-family: "Karla", sans-serif;
}

.showcase {
  user-select: none;
  width: calc(100% - 360px);
  .flex-content {
    padding: 30px;
    position: relative;
  }
}

.font {
  position: relative;
  &-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px;
  }

  &-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: #fff;
    border-radius: 6px 0;
    font-size: 30px;
    user-select: none;
  }

  &-detail {
    box-sizing: border-box;
    padding-left: 20px;
    width: calc(100% - 82px);
  }

  &-name {
    margin: 0 0 5px 0;
    font-weight: normal;
    font-size: 20px;
    user-select: none;
  }

  &-type {
    margin: 0;
    color: #44464c;
    letter-spacing: 1px;
    font-size: 14px;
    text-transform: uppercase;
    user-select: none;
  }

  &-title {
    font-size: 14px;
    letter-spacing: 1.4px;
    margin: 0;
    border-bottom: 1px solid #27292f;
    color: #58595d;
    padding: 8px 20px;
    font-weight: normal;
    user-select: none;
    display: flex;
    justify-content: space-between;
  }
  &-sizes {
    & > span {
      width: 28px;
      height: 20px;
      display: inline-block;
      margin-left: 10px;
      cursor: pointer;
      color: #44464c;
      font-size: 15px;
      text-align: center;
      border: 1px solid #28292d;
      transition: 0.2s;
      &:hover {
        color: lighten(#44464c, 10%);
        border-color: lighten(#44464c, 10%);
        &:after {
          color: lighten(#44464c, 10%);
        }
      }
      &:after {
        position: relative;
        top: -3px;
        font-weight: bold;
      }
      &.increase:after {
        content: "+";
        font-size: 13px;
      }
      &.decrease:after {
        content: "-";
      }
    }
  }
  &-random {
    width: 30px;
    text-align: right;
    cursor: pointer;
    svg {
      fill: #44464c;
      max-width: 20px;
      transition: 0.3s;
    }
    &:hover {
      svg {
        fill: lighten(#5a5c61, 16%);
      }
    }
  }
  &.for-body {
    .font-icon {
      background: #584a4b;
      font-family: var(--bodyFont);
    }
  }
  &.for-heading {
    .font-icon {
      background: #373d46;
      font-family: var(--headingFont);
    }
  }
}

.random {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  &-col {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    &.for-heading {
      padding: 20px 10px 20px 20px;
    }
    &.for-body {
      padding: 20px 20px 20px 10px;
    }
    label {
      color: #58595d;
      font-size: 13px;
      text-transform: uppercase;
      margin-bottom: 6px;
      letter-spacing: 1px;
    }
    select {
      font-family: "Karla", sans-serif;
      padding: 0 7px;
      border: 1px solid #27292f;
      height: 34px;
      background: #1a1c21;
      text-transform: capitalize;
      color: #fff;
      &:focus {
        border-color: lighten(#27292f, 5%);
      }
    }
  }
  &-button {
    width: 70%;
    padding: 0 20px 20px 20px;
    button {
      width: 100%;
      user-select: none;
      border: 1px solid #27292f;
      background: #1e2127;
      font-family: "Karla", sans-serif;
      color: #5c5d63;
      padding: 7px;
      font-size: 15px;
      letter-spacing: 0.8px;
      cursor: pointer;
      transition: 0.3s;
      display: block;
      text-align: center;
      text-decoration: none;
      &:hover {
        background: rgba(#27292f, 0.8);
        border-color: lighten(#2d2f35, 5%);
        color: #fff;
      }
    }
    &.for-use {
      width: 30%;
      padding: 0 0 20px 20px;
      button {
        border-color: #373d46;
        background: rgba(55, 61, 70, 0.3);
        &:hover {
          background: rgba(55, 61, 70, 0.5);
          color: #fff;
        }
      }
    }
  }
}

.card {
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  word-break: break-word;
  h1 {
    font-family: var(--headingFont);
    font-weight: normal;
    margin: 0 0 20px 0;
    font-size: var(--headingFont-size);
  }
  p {
    line-height: 1.5;
    margin: 0;
    font-size: var(--bodyFont-size);
    color: #9c9c9e;
    font-family: var(--bodyFont);
    & + p {
      margin-top: 15px;
    }
  }
  &.w60 {
    width: calc(55% - 30px);
  }
  &.w40 {
    width:45%;
  }
  &.w33 {
    width: calc(33% - 20px);
    padding: 100px 50px;
  }
  &-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    & + & {
      margin-top: 40px;
    }
  }
  &-post {
    background-image: url(https://images.unsplash.com/photo-1488904522966-31c76bc83279?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f286891a9285b6b3462494f2f8b94971&auto=format&fit=crop&w=1500&q=80);
    background-position: center;
    background-size: cover;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 50px;
    h1 {
      font-size: var(--headingFont-size--big);
    }
    p {
      font-size: var(--bodyFont-size--big);
      color: rgba(255, 255, 255, 0.32);
    }
    &:after {
      background: rgba(#1f2026, 0.78);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      content: "";
      z-index: -1;
    }
  }
  &-heading {
    background: rgba(#373d46, 0.4);
    p {
      color: #71767d;
    }
  }
  &-body {
    background: rgba(#584a4b, 0.2);
    p {
      color: #7b7475;
    }
  }
  &-default {
    background: rgba(#27292f, 0.5);
    p {
      color: #71767d;
    }
  }
}

.theme {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 80px;
  height: 32px;
  border: 1px solid #3c3f46;
  font-size: 11px;
  transition: .3s;
  display: inline-flex;
  align-items: center;
  border-radius: 30px;
  text-indent: 12px;
  cursor: pointer;
  &:after {
    width: 30px;
    background: #3c3f46;
    height:20px;
    position: absolute;
    top: 5px;
    right: 5px;
    content: "";
    transition: .3s;
    border-radius: 30px;
  }
  &-light {
    text-indent: 42px;
    border-color: #e0e0e0;
    &:after {
      right: calc(100% - 36px);
      background: #e0e0e0;
    }
  }
}

@media(max-width: 767px) {
  .app {
    overflow: auto;
    flex-wrap: wrap;
  }
  .flex-column {
    width: 100%;
    height: auto;
  }
  .card {
    width: 100% !important;
    &-row {
      width: 100%;
    }
    &.w33 + &.w33 {
      margin-top: 40px;  
    }
  }
  .theme {
    float: right;
    right: auto;
    top: auto;
    margin-bottom: 20px;
    position: relative;
  }
}
              
            
!

JS

              
                class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: {},
      categories: [],
      useLink: "",
      init: false,
      isLight: false,
      themeName: "Dark",
      headingFont: {
        family: "",
        category: "",
        icon: "",
        selectedCategory: "",
        size: 32,
        sizeBig: 38
      },
      bodyFont: {
        family: "",
        category: "",
        icon: "",
        selectedCategory: "",
        size: 18,
        sizeBig: 20
      },
      api: "https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyAOLlUKLq0gXKXbqP8tr3rjfkWup4WxkuQ"
    };
  }

  componentDidMount() {
    this.getData();
  }

  changeHeadingCategory(e) {
    const selectedCategory = e.target.value;
    this.setState({
      headingFont: {
        ...this.state.headingFont,
        selectedCategory: selectedCategory
      }
    });
  }

  changeBodyCategory(e) {
    const selectedCategory = e.target.value;
    this.setState({
      bodyFont: {
        ...this.state.bodyFont,
        selectedCategory: selectedCategory
      }
    });
  }

  updateHeadingState(font) {
    this.setState({
      headingFont: {
        ...this.state.headingFont,
        family: font.family,
        category: font.category,
        icon: font.family.substr(0, 1),
        selectedCategory: font.category
      }
    });
  }

  updateBodyState(font) {
    this.setState({
      bodyFont: {
        ...this.state.bodyFont,
        family: font.family,
        category: font.category,
        icon: font.family.substr(0, 1),
        selectedCategory: font.category
      }
    });
  }

  getRandomFont(data, category) {
    let tempFonts = [],
      font;
    data
      .filter(item => {
        return item.category == category;
      })
      .map(obj => {
        tempFonts.push(obj);
      });
    font = tempFonts[Math.floor(Math.random() * (tempFonts.length - 1) + 1)];
    return font;
  }

  appendFont(src) {
    const link = document.createElement("link");
    link.href = src;
    link.rel = "stylesheet";
    document.head.appendChild(link);
  }

  applyFont(font, cssVariable) {
    const src = `https://fonts.googleapis.com/css?family=${font.family.replace(
      / /g,
      "+"
    )}`;
    this.appendFont(src);
    document.documentElement.style.setProperty(cssVariable, font.family);
  }

  useFonts(e) {
    const headingFont = this.state.headingFont.family.replace(/ /g, "+");
    const bodyFont = this.state.bodyFont.family.replace(/ /g, "+");
    const useLink = `https://fonts.google.com/?selection.family=${headingFont}|${bodyFont}`;
    const win = window.open(useLink, "_blank");
    win.focus();
  }

  randomFonts() {
    const selectedHeadingCategory = this.state.headingFont.selectedCategory;
    const selectedBodyCategory = this.state.bodyFont.selectedCategory;
    const data = this.state.data;
    const categories = this.state.categories;
    const headingFont = this.getRandomFont(data, selectedHeadingCategory);
    const bodyFont = this.getRandomFont(data, selectedBodyCategory);
    this.applyFont(headingFont, "--headingFont");
    this.applyFont(bodyFont, "--bodyFont");
    this.updateHeadingState(headingFont);
    this.updateBodyState(bodyFont);
  }

  shuffleHeadingFont(e) {
    const selectedHeadingCategory = this.state.headingFont.selectedCategory;
    const data = this.state.data;
    const headingFont = this.getRandomFont(data, selectedHeadingCategory);
    this.applyFont(headingFont, "--headingFont");
    this.updateHeadingState(headingFont);
  }

  shuffleBodyFont(e) {
    const selectedBodyCategory = this.state.bodyFont.selectedCategory;
    const data = this.state.data;
    const bodyFont = this.getRandomFont(data, selectedBodyCategory);
    this.applyFont(bodyFont, "--bodyFont");
    this.updateBodyState(bodyFont);
  }

  increaseFontSize(e, type) {
    if (type == "body") {
      let sizeBig = this.state.bodyFont.sizeBig;
      let size = this.state.bodyFont.size;
      size++;
      sizeBig++;
      this.setState({
        bodyFont: {
          ...this.state.bodyFont,
          size,
          sizeBig
        }
      });
      document.documentElement.style.setProperty(
        "--bodyFont-size--big",
        `${sizeBig}px`
      );
      document.documentElement.style.setProperty(
        "--bodyFont-size",
        `${size}px`
      );
    } else if (type == "heading") {
      let sizeBig = this.state.headingFont.sizeBig;
      let size = this.state.headingFont.size;
      size++;
      sizeBig++;
      this.setState({
        headingFont: {
          ...this.state.headingFont,
          size,
          sizeBig
        }
      });
      document.documentElement.style.setProperty(
        "--headingFont-size--big",
        `${sizeBig}px`
      );
      document.documentElement.style.setProperty(
        "--headingFont-size",
        `${size}px`
      );
    }
  }
  decreaseFontSize(e, type) {
    if (type == "body") {
      let sizeBig = this.state.bodyFont.sizeBig;
      let size = this.state.bodyFont.size;
      size--;
      sizeBig--;
      this.setState({
        bodyFont: {
          ...this.state.bodyFont,
          size,
          sizeBig
        }
      });
      document.documentElement.style.setProperty(
        "--bodyFont-size--big",
        `${sizeBig}px`
      );
      document.documentElement.style.setProperty(
        "--bodyFont-size",
        `${size}px`
      );
    } else if (type == "heading") {
      let sizeBig = this.state.headingFont.sizeBig;
      let size = this.state.headingFont.size;
      size--;
      sizeBig--;
      this.setState({
        headingFont: {
          ...this.state.headingFont,
          size,
          sizeBig
        }
      });
      document.documentElement.style.setProperty(
        "--headingFont-size--big",
        `${sizeBig}px`
      );
      document.documentElement.style.setProperty(
        "--headingFont-size",
        `${size}px`
      );
    }
  }

  changeTheme(e) {
    const currentTheme = this.state.isLight;
    let newTheme, themeName;
    currentTheme ? (newTheme = false) : (newTheme = true);
    newTheme ? (themeName = "Light") : (themeName = "Dark");
    this.setState({
      isLight: newTheme,
      themeName
    });
  }

  getData() {
    fetch(this.state.api)
      .then(response => {
        return response.json();
      })
      .then(response => {
        const data = response.items;
        const categories = data
          .map(item => item.category)
          .filter((value, index, self) => self.indexOf(value) === index);

        const randomHeadingCategory =
          categories[Math.floor(Math.random() * categories.length)];
        const randomBodyCategory =
          categories[Math.floor(Math.random() * categories.length)];
        const headingFont = this.getRandomFont(data, randomHeadingCategory);
        const bodyFont = this.getRandomFont(data, randomBodyCategory);
        this.applyFont(headingFont, "--headingFont");
        this.applyFont(bodyFont, "--bodyFont");
        this.updateHeadingState(headingFont);
        this.updateBodyState(bodyFont);
        this.setState({ data, categories });
        setTimeout(() => {
          this.setState({ init: true });
        }, 200);
      });
  }

  render() {
    return (
      <div
        className={`${this.state.init ? "show" : ""} ${
          this.state.isLight ? "app-light" : ""
        } app`}
      >
        <div className="sidebar flex-column">
          <div className="flex-content">
            <Random
              headingOnChange={e => this.changeHeadingCategory(e)}
              bodyOnChange={e => this.changeBodyCategory(e)}
              randomButton={e => this.randomFonts(e)}
              categories={this.state.categories}
              randomButtonText="RANDOM"
              useButton={e => this.useFonts(e)}
              useButtonText="USE"
              selectedHeadingCategory={this.state.headingFont.selectedCategory}
              selectedBodyCategory={this.state.bodyFont.selectedCategory}
            />
            <Font
              title="HEADING FONT"
              additionalClass="for-heading"
              name={this.state.headingFont.family}
              category={this.state.headingFont.category}
              icon={this.state.headingFont.icon}
              shuffleFont={e => this.shuffleHeadingFont(e)}
              decreaseFontSize={e => this.decreaseFontSize(e, "heading")}
              increaseFontSize={e => this.increaseFontSize(e, "heading")}
            />
            <Font
              title="BODY FONT"
              additionalClass="for-body"
              name={this.state.bodyFont.family}
              category={this.state.bodyFont.category}
              icon={this.state.bodyFont.icon}
              shuffleFont={e => this.shuffleBodyFont(e)}
              decreaseFontSize={e => this.decreaseFontSize(e, "body")}
              increaseFontSize={e => this.increaseFontSize(e, "body")}
            />
          </div>
        </div>
        <Showcase
          themeName={this.state.themeName}
          themeClass={`${this.state.isLight ? "theme-light" : ""}`}
          changeTheme={e => this.changeTheme(e)}
        />
      </div>
    );
  }
}

const shuffleIcon = (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.1 490.1">
    <path d="M194.5 324.35l15-24.2c3.6-5.8 1.8-13.3-4-16.9-5.7-3.6-13.3-1.8-16.9 4l-15 24.2c-27.2 43.9-66 69.1-106.6 69.1H12.2c-6.8 0-12.2 5.5-12.2 12.3s5.5 12.3 12.2 12.3h54.9c49.3-.2 95.7-29.6 127.4-80.8zM486.4 88.75L427 29.25c-4.8-4.8-12.5-4.8-17.3 0s-4.8 12.5 0 17.3l38.6 38.6H391.4c-49.2 0-95.7 29.4-127.4 80.6l-9.2 14.9c-3.6 5.8-1.8 13.3 4 16.9 2 1.2 4.2 1.8 6.4 1.8 4.1 0 8.1-2.1 10.4-5.8l9.2-14.9c27.2-43.9 66-69 106.6-69H448.2l-38.6 38.6c-4.8 4.8-4.8 12.5 0 17.3 2.4 2.4 5.5 3.6 8.7 3.6s6.3-1.2 8.7-3.6l59.5-59.5c4.7-4.8 4.7-12.6-.1-17.3zm-26.1 8.8v-.2-.2l.2.2-.2.2z" />
    <path d="M409.6 460.85c2.4 2.4 5.5 3.6 8.7 3.6s6.3-1.2 8.7-3.6l59.5-59.5c4.8-4.8 4.8-12.5 0-17.3l-59.5-59.4c-4.8-4.8-12.5-4.8-17.3 0s-4.8 12.5 0 17.3l38.6 38.6h-55.1c-40.5 0-79.4-25.2-106.6-69.1l-90.2-145.7c-31.7-51.3-78.2-80.6-127.4-80.6H12.2c-6.8 0-12.2 5.5-12.2 12.3s5.5 12.3 12.2 12.3h56.7c40.5 0 79.4 25.2 106.6 69l90.2 145.7c31.7 51.3 78.2 80.7 127.4 80.7h55.1l-38.6 38.6c-4.7 4.6-4.7 12.3 0 17.1zm50.7-68.3l.2.2-.2.2v-.2-.2z" />
  </svg>
);

function RandomCol(props) {
  return (
    <div className={`random-col ${props.additionalClass}`}>
      <label>{props.label}</label>
      <select onChange={props.onChange} value={props.selectedCategory}>
        {props.categories.map((item, index) => (
          <option key={index} value={item}>
            {item}
          </option>
        ))}
      </select>
    </div>
  );
}

function Random(props) {
  return (
    <div className="random">
      <RandomCol
        label="HEADING"
        additionalClass="for-heading"
        onChange={props.headingOnChange}
        categories={props.categories}
        selectedCategory={props.selectedHeadingCategory}
      />
      <RandomCol
        label="BODY"
        additionalClass="for-body"
        onChange={props.bodyOnChange}
        categories={props.categories}
        selectedCategory={props.selectedBodyCategory}
      />
      <div className="random-button for-use">
        <button onClick={props.useButton}>{props.useButtonText}</button>
      </div>
      <div className="random-button">
        <button onClick={props.randomButton}>{props.randomButtonText}</button>
      </div>
    </div>
  );
}

function Font(props) {
  return (
    <div className={`font ${props.additionalClass}`}>
      <h2 className="font-title">
        {props.title}
        <div className="font-sizes">
          <span className="decrease" onClick={props.decreaseFontSize}>
            A
          </span>
          <span className="increase" onClick={props.increaseFontSize}>
            A
          </span>
        </div>
      </h2>
      <div className="font-content">
        <div className="font-icon">{props.icon}</div>
        <div className="font-detail">
          <h2 className="font-name">{props.name}</h2>
          <p className="font-type">{props.category}</p>
        </div>
        <div className="font-random" onClick={props.shuffleFont}>
          {shuffleIcon}
        </div>
      </div>
    </div>
  );
}

function Showcase(props) {
  return (
    <div className="showcase flex-column">
      <div className="flex-content">
        <div
          className={`${props.themeClass} theme`}
          onClick={props.changeTheme}
        >
          {props.themeName}
        </div>
        <div className="card-row">
          <div className="card card-post w40">
            <h1>Master cleanse</h1>
            <p>
              Humblebrag post-ironic hexagon yuccie kogi la croix squid, ethical
              paleo cardigan enamel pin prism bespoke tumeric.
            </p>
          </div>
          <div className="card w60">
            <h1>Presentation</h1>
            <p>
              Humblebrag post-ironic hexagon yuccie kogi la croix squid, ethical
              paleo cardigan enamel pin prism bespoke tumeric. Freegan venmo
              authentic cred lumbersexual asymmetrical.
            </p>
            <p>
              Humblebrag post-ironic hexagon yuccie kogi la croix squid, ethical
              paleo cardigan enamel pin prism bespoke tumeric. Freegan venmo
              authentic cred lumbersexual asymmetrical
            </p>
            <p>
              Cliche tumblr occupy chia, jean shorts ethical activated charcoal
              sriracha gastropub. Chambray live-edge kogi, forage vaporware
              kickstarter authentic cardigan cred squid viral. 
            </p>
            <p>Distillery drinking vinegar schlitz shabby chic yr cred gluten-free. Farm-to-table lumbersexual kogi direct trade, umami crucifix hot chicken.</p>
          </div>
        </div>
        <div className="card-row">
          <div className="card card-heading w33">
            <h1>Hoodie wayfarers selfies</h1>
            <p>
              Taiyaki hot chicken vegan, leggings aesthetic celiac tacos air
              plant subway tile.
            </p>
          </div>
          <div className="card card-body w33">
            <h1>Seitan knausgaard</h1>
            <p>
              Pug small batch pabst skateboard slow-carb, bespoke you probably
              haven't heard.
            </p>
          </div>
          <div className="card card-default w33">
            <h1>Hexagon coloring book</h1>
            <p>
              Authentic lyft gochujang vape leggings YOLO franzen. Locavore VHS
              cronut.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("app"));

              
            
!
999px

Console