JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/@vueform/multiselect"></script>
<link rel="stylesheet" href="https://unpkg.com/@vueform/multiselect/themes/default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-markup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-css-extras.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/toolbar/prism-toolbar.min.css">
<div id="app">
  
  <div class="example">
    <h3 id="example-1">#1 - Single select</h3>
    <div class="output">Data: {{ example1.value }}</div>
    <Multiselect
      v-model="example1.value"
      v-bind="example1"
    ></Multiselect>
    <pre class="language-html" v-pre><code v-pre>
      &lt;Multiselect
        v-model="value"
        :options="['Batman', 'Robin', 'Joker']"
      />
    </code></pre>
  </div>
  
  <div class="example">
    <h3 id="example-2">#2 - Multiselect with object options</h3>
    <div class="output">Data: {{ example2.value }}</div>
    <Multiselect
      v-model="example2.value"
      v-bind="example2"
    ></Multiselect>
    <pre class="language-html" v-pre><code v-pre>
      &lt;Multiselect
       ...

SCSS

body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  background: #f1f1f1;
}

h3 {
  margin-top: 0;
}

.example {
  background: #ffffff;
  margin: 20px;
  border-color: #e7e7e7;
  padding: 40px;
}

.example pre {
  background: #1F2937;
  padding: 18px 20px;
  overflow-x: scroll;
  font-size: 0.85em;
}

.output {
  font-family: Courier, Courier New, Lucida Console, Monaco, Consolas;
  background: #000000;
  color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}

.multiselect-tag.is-user {
  padding: 5px 8px;
  border-radius: 22px;
  background: #35495e;
  margin: 3px 3px 8px;
}

.multiselect-tag.is-user img {
  width: 18px;
  border-radius: 50%;
  height: 18px;
  margin-right: 8px;
  border: 2px solid #ffffffbf;
}

.multiselect-tag.is-user i:before {
  color: #ffffff;
  border-radius: 50%;;
}

.user-image {
  margin: 0 6px 0 0;
  border-radius: 50%;
  height: 22px;
}

.character-option-icon {
  margin: 0 6px 0 0;
  height: 22px;
}

.character-label-icon {
  margin: 0 6px 0 0;
  height: 26px;
}

.toolbar {
  margin-right: 5px;
  
  button {
    cursor: pointer;
  }
}

/* Inline code */
:not(pre) > code {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
  color: #7c3aed;
}

[class*="language-"] {
  code, pre {
    color: #f8f8f2;
    background: none;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    font-size: 14px;
    line-height: 1.75;
    border-radius: 8px;
  }

  /* Code blocks */
  pre {
    overflow: auto;
    padding: 1.5rem;
  }

  /* Inline code */
  :not(pre) > code {
    padding: 0.1em;
    border-radius: 0.3em;
    white-space: normal;
    background: #f5f7f9;
  }

  .token.comment,
  .token.prolog,
  .token.doctype,
 ...

JavaScript

const app = Vue.createApp({
  data: () => ({
    example1: {
      value: 0,
      options: ['Batman', 'Robin', 'Joker']
    },
    example2: {
    	mode: 'multiple',
      value: ['robin'],
      closeOnSelect: false,
      options: {
        batman: 'Batman',
        robin: 'Robin',
        joker: 'Joker'
      }
    },
    example3: {
    	mode: 'multiple',
      value: [],
      closeOnSelect: false,
      options: [
        { value: 'batman', label: 'Batman' },
        { value: 'robin', label: 'Robin', disabled: true },
        { value: 'joker', label: 'Joker' },
      ]
    },
    example4: {
    	mode: 'multiple',
      groups: true,
      value: [],
      closeOnSelect: false,
      options: [
      	{
        	label: 'DC',
          options: ['Batman', 'Robin', 'Joker'],
        },
      	{
        	label: 'Bar',
          options: [{ label: 'Spider', options: ['man', 'spidy', 'don know'] }, 'Iron Man', 'Captain America'],
        },
      ]
    },
    example5: {
    	mode: 'tags',
      value: ['batman'],
      closeOnSelect: false,
      options: [
        { value: 'batman', label: 'Batman' },
        { value: 'robin', label: 'Robin' },
        { value: 'joker', label: 'Joker' },
      ],
      searchable: true,
      createOption: true
    },
    example6: {
      value: null,
      placeholder: 'Choose a programming language',
      filterResults: false,
      minChars: 1,
      resolveOnLoad: false,
      delay: 0,
      searchable: true,
      options: async (query) => {
        return await fetchLanguages(query)
      }
    },
    example7: {
    	mode: 'tags',
      closeOnSelect: false,
      value: [],
      placeholder: 'Choose your stack',
      filterResults: false,
      minChars: 1,
      resolveOnLoad: false,
      delay: 0,
      searchable: true,
      options: async (query) => {
        return await fetchLanguages(query)
      }
    },
    example8: {
      value: null,
      placeholder: 'Select your character',
      label:...