JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="demo">
  <div class="demo-items">
    <button>Define Locations</button><br/><br/>
    <ul class="demo-list"></ul>
  </div>
  <div class="demo-img">
    <img src="https://picsum.photos/id/26/800/600" />
  </div>
</div>

CSS

body {
  padding: 2rem;
  font-family: sans-serif;
}

.demo {
  display: flex;
  gap: 1rem;
  width: 1000px;
}

.demo-list {
  li {
    background: #eee;
    padding: .5rem 1rem;
    margin-bottom: 2px;
    width: 200px;
  }
}

.demo-img {
  flex-grow: 1;
}

img {
  width: 100%;
  height: auto;
}

JavaScript

// Mock data
const mockData = [
  { name: 'Point A', x: 10, y: 20 },
  { name: 'Point B', x: 15, y: 25 },
  { name: 'Point C', x: 20, y: 30 },
  { name: 'Point D', x: 25, y: 35 },
];

// Create a container
const container = document.querySelector('.demo-list');

// Populate the list with mock data
mockData.forEach((item) => {
  const listItem = document.createElement('li');
  listItem.textContent = item.name;
  container.appendChild(listItem);
});