JSFiddle - React, Tailwind, and code Playground

by irfancoder

HTML

<script src="https://unpkg.com/@irfanismail/mon-dropdown@1.0.1"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.16/tailwind.min.css">
<div id="app" class="space-y-8">
  <div class="flex justify-between">
  
  <div>
    <h1 class="text-xl font-bold">MonDropdown</h1>
    <p>With TailwindCSS implementation</p>
  </div>
  
  <div class="flex space-x-4">
    <a href="https://github.com/irfancoder/mon-modal">GitHub</a>
    <a href="https://www.npmjs.com/package/@irfanismail/mon-modal">npmjs</a>
  </div>
  
  </div>
  <div class="px-16 py-8 space-y-6">
  <div>
  
  <h4>
  Basic Implementation
  </h4>
  
  <!-- Basic Dropdown -->
  <mon-dropdown 
      label="Basic Dropdown" 
      label-class="text-gray-500 py-2 px-3 border rounded-md focus:text-black focus:border-black" >
      <template #content>
          <div class="dropdown-content">
            <ul>
              <li>Action 1</li>
              <li>Action 2</li>
              <li>Action 3</li>
            </ul>         
          </div>
      </template>
      </mon-dropdown>
      <!-- Right Anchor Dropdown -->
  <mon-dropdown 
      label="Right Anchor" 
      label-class="text-gray-500 py-2 px-3 border rounded-md focus:text-black focus:border-black" 
      anchor="right">
      <template #content>
          <div class="dropdown-content">
            <ul>
              <li>Action 1</li>
              <li>Action 2</li>
              <li>Action 3</li>
            </ul>         
          </div>
      </template>
  </mon-dropdown>
  <!-- Drop Up / Left Anchor -->
 <mon-dropdown 
      label="Drop Up / Left Anchor" 
      label-class="text-gray-500 py-2 px-3 border rounded-md focus:text-black focus:border-black" 
      drop-up>
      <template #content>
          <div class="dropdown-content">
            <ul>
              <li>Action 1</li>
              <li>Action 2</li>
              <li>Action 3</li>
            </ul>         
          </div>
      </template>
 ...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

a {
  color: blue;
}

/* EXAMPLE CSS */
.dropdown-content {
  padding: 1em 0;
  min-width: 240px;
}

.dropdown-content > ul > li{
  font-weight: 400;
  padding: 0.5em 0.75em;
}
.dropdown-content > ul > li:hover {
  background: rgba(0,0,0,0.2)
}

Vue

new Vue({
  el: "#app",
  components: { MonDropdown },
  data () {
  	return {
    	showCustomTrigger: false
    }
  },
  methods: {
  	log: function(text) {
    	console.log(text)
    }
  }
})