JSFiddle - React, Tailwind, and code Playground

by Fiddel

HTML

<div>
gkröskdgsdkg ksdöl ksöldkgöls g
</div><div>
gkröskdgsdkg ksdöl ksöldkgöls g
</div><div>
gkröskdgsdkg ksdöl ksöldkgöls g
</div>

SCSS

/* -------------------------------------------------------------------------- */
/* Chatbot placed in header */
/* For demo see
http://otds1.oge-staging.net/cps/rde/oge-internet/hs.xsl/index.htm */
/*
Recast AI is now called CAI  (see "cai.tools.sap" for further details
*/


/* -------------------------------------------------------------------------- */

// Raster und Breiten
$slot_width: 280px; // 17.5rem Spaltenbreite
$slot_margin: 16px; // 1rem Abstände horizontal zwischen Spalten
$em: 1em;

$width_max: ($slot_width * 4)+ ($slot_margin * 3); // Breite der Meta-/ CE-Seiten bei full width
$width_mid: ($slot_width * 2)+ ($slot_margin * 1); // Breite der Hauptspalte
$width_min: $slot_width;

@mixin grid($amount) {
  $width: $slot_width * $amount;
  min-height: 1px;
  width: $width;
  //width: -webkit-calc($width - $em);
  //width: calc($width - $em);
  & + .slots_2 {
    width: $width_mid;

    @include breakpoint(mid) {
      width: 100%; // nur eine Spalte in kleinen Viewpoints
      max-width: none;
    }
  }

  @include breakpoint(mid) {
    width: 100%; // nur eine Spalte in kleinen Viewpoints
    max-width: none;
  }
}

// padding und border auf .ce, .sr u.ä. Seitentypen hinzuaddieren
@mixin breakpoint($class) {
  @if $class == min {
    @media all and (max-width: ($width_mid + 12px)) {
      @content;
    }
  } @else if $class == mid {
    //@media all and (max-width: ($width_max + 62px)) {
    @media all and (max-width: 1250px) {
      @content;
    }
  } @else if $class == max {
    //@media all and (min-width: ($width_max + 63px)) {
    @media all and (min-width: 1251px) {
      @content;
    }
  } @else {
    //@warn "'min': <660px,'mid': <890px, 'max': >1200px";
  }
}

/* -------------------------------------------------------------------------- */
/* Rearrangement of already existing layout elements */
/* -------------------------------------------------------------------------- */

/* Logo */
.chatbot2019 header#head div.wrapper a img {
}

/* Search...