JSFiddle - React, Tailwind, and code Playground

by chrischilcoat

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.4/tailwind.min.css">
<div id="app"></div>

CSS

.scrollbar-hide::-webkit-scrollbar {
   display: none;
}
.scrollbar-hide:{
  -ms-overflow-style: none;  // IE and Edge
  scrollbar-width: none;  // Firefox
}

React

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Transition, Popover } from '@headlessui/react'
import { usePopper } from 'react-popper'


import { XIcon, ExclamationIcon, InformationCircleIcon, DotsHorizontalIcon } from '@heroicons/react/outline'


const menu = [
  { name: 'Hide Ad', subtext: 'Never see this ad again.', icon: XIcon },
  { name: 'Report Ad', subtext: 'Tell us about a problem with this ad.', icon: ExclamationIcon},
  { name: 'Why am I seeing this?', href: '#', icon: InformationCircleIcon},
]

const sponsored = [
  {
    name: 'Aventon | Award Winning Ebikes',
    url: 'aventon.com',
    href: '#',
    imageUrl:
      'https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
  },
  {
    name: 'Aventon | Award Winning Ebikes',
    url: 'aventon.com',
    href: '#',
    imageUrl:
      'https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
  },
  // More sponsors...
]

function FbSponsored() {

  const [referenceElement, setReferenceElement] = useState()
  const [popperElement, setPopperElement] = useState()
  const { styles, attributes } = usePopper(referenceElement, popperElement, { placement: 'bottom-start' })

  return (
    <section aria-labelledby="sponsored-heading">
      <h2 id="sponsored-heading" className="px-2 font-semibold tracking-wider text-gray-500 text-md">
        Sponsored
      </h2>
      {sponsored.map((item, index) => (
        <div className="relative group" key={index}>
          <a href={item.href} className="block bg-transparent rounded-lg group-hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-inset focus:ring-opacity-60">
            <div className="p-2">
              <div className="flow-root">
                <div className="-my-4 divide-y...