JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container mt-3">

    <h3 class="mb-3">Horizontal Scroll SVG</h3>

    <div class="scroll-x">
        <div class="heatmap">
            <svg x="0px" y="0px" viewBox="0 0 8000 400">
                <style type="text/css">
                   ...

CSS

.scroll-x {
  overflow-x: scroll;
  width: 100%;
  height: 400px;
}

.heatmap {
  width: 8000px;
  height: 400px;
}