<div id="vue"></div>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400);

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: 1.15em "Source Sans Pro", sans-serif;
  letter-spacing: 0.5px;
  background: #EEEEEE;
  color: black;
}

h1 {
  font-size: 2.5em;
  margin-bottom: 0;
}
h2 {
  font-size: 2em;
  margin-bottom: 0;
}
p {
  margin-top: 0;
}

input {
  display: block;
  appearance: none;
  margin: 0.5em auto;
  padding: 0.5em;
  padding-left: 0.1em;
  vertical-align: middle;
  border: 1px solid transparent;
  border-bottom: 1px solid black;
  border-radius: 2px;
  color: black;
  background: transparent;
  font-size: 1em;
  width: 90%;
  width: calc(100% - 1em);
  max-width: 20.25em;
  outline: 0;
}

.slideUp-enter-active {
  transform: translateY(0);
  transition: all .3s ease;
}
.slideUp-leave-active {
  position: absolute;
}

.slideUp-enter {
  transform: translateY(25%);
  opacity: 0;
}

.openUp-enter-active, .openUp-leave-active {
  transition: all .5s
}

.openUp-enter, .openUp-leave-active {
  opacity: 0;
  transform: translateY(25%);
}

.vueApp {
  text-align: center;
  padding: 0.5em;

  .colors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;

    .color {
      height: 200px;
      margin: 0.5em;
      padding: 0.5em;
      color: white;
      display: flex;
      align-items: flex-end;
      flex-grow: 1;
      transition: all 0.1s;
      cursor: pointer;

      &:hover {
        // padding: 0.55em;
        text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
        box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
      }
      
      span {
        &:first-of-type {
          align-self: flex-end;
          text-align: left;
          font-size: 2em;
          width: 100%;
        }
        
        &:nth-of-type(2) {
          text-align: right;
          align-self: flex-start;
          font-size: 0.75em;
          width: 100%;
        }
      }
    }
  }
  
  .messages {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
    .message {
      padding: 1em;
      background: rgba(0,0,0,0.25);
      color: white;
    }
  }
}
View Compiled
/*-----------------
 Vue 2.0.3
-----------
https://vuejs.org/guide/
https://vuejs.org/api/

-----------------*/

let app = new Vue({
  el: '#vue',

  template: `<div class="vueApp">
<h1>Pantone Color Search</h1>
<input placeholder="Search a color, season, year, or hex code" v-model="colorSearch" />
<transition name="openUp">
<div v-if="colors.length > 0">  
<h2>Pantone Colors</h2>
<p>(Click to copy to clipboard)</p>
<transition-group name="openUp" class="colors">
<div class="color" v-for="(color, index) in filteredColors" v-bind:key="index"  v-bind:data-clipboard-text="color.hex" v-bind:style="{ backgroundColor: color.hex }" @click="addedToClipboard(color.color, color.hex)">
<span>{{ color.color }}</span> 
<span>{{ color.season }} {{ color.year }}</span> 
</div>
</transition-group>
<transition-group name="slideUp" class="messages">
<div class="message" v-for="(message, index) in messages" v-bind:key="index" v-bind:style="{ backgroundColor: message.hex }" @click="removeMessage(index)">
{{ message.message }}
</div>
</transition-group>
</div>
</transition>
</div>`,

  mounted: function() {
    new Clipboard('.color');
  },

  data: {
    colorSearch: '',
    colors: [
      //Spring 2017
      {
        color: "Primrose Yellow",
        hex: "#f6d258",
        year: "2017",
        season: "Spring"
      },
      {
        color: "Pale Dogwood",
        hex: "#efcec5",
        year: "2017",
        season: "Spring"
      },
      {
        color: "Hazelwood",
        hex: "#d1af94",
        year: "2017",
        season: "Spring"
      },
      {
        color: "Island Paradise",
        hex: "#97d5e0",
        year: "2017",
        season: "Spring"
      },
      {
        color: "Greenery",
        hex: "#88b14b",
        year: "2017",
        season: "Spring"
      },
      {
        color: "Flame",
        hex: "#ef562d",
        year: "2017",
        season: "Spring"
      },
      {
        color: "Pink Yarrow",
        hex: "#d13076",
        year: "2017",
        season: "Spring"
      },
      {
        color: "Niagra",
        hex: "#5587a2",
        year: "2017",
        season: "Spring"
      },
      {
        color: "Kale",
        hex: "#5c7148",
        year: "2017",
        season: "Spring"
      },
      {
        color: "Lapis Blue",
        hex: "#0c4c8a",
        year: "2017",
        season: "Spring"
      },

      //Fall 2016
      {
        color: "Riverside",
        hex: "#4c6a92",
        year: "2016",
        season: "Fall"
      },
      {
        color: "Airy Blue",
        hex: "#92b6d5",
        year: "2016",
        season: "Fall"
      },
      {
        color: "Shark Skin",
        hex: "#838487",
        year: "2016",
        season: "Fall"
      },
      {
        color: "Aurora Red",
        hex: "#b93a32",
        year: "2016",
        season: "Fall"
      },
      {
        color: "Warm Taupe",
        hex: "#af9483",
        year: "2016",
        season: "Fall"
      },
      {
        color: "Dusty Cedar",
        hex: "#ad5d5d",
        year: "2016",
        season: "Fall"
      },
      {
        color: "Lush Meadow",
        hex: "#006e51",
        year: "2016",
        season: "Fall"
      },
      {
        color: "Spicy Mustard",
        hex: "#d8ae47",
        year: "2016",
        season: "Fall"
      },
      {
        color: "Potters Clay",
        hex: "#9e4624",
        year: "2016",
        season: "Fall"
      },
      {
        color: "Bodacious",
        hex: "#b76ba3",
        year: "2016",
        season: "Fall"
      },

      //Spring 2016
      {
        color: "Rose Quartz",
        hex: "#f7cac9",
        year: "2016",
        season: "Spring"
      },
      {
        color: "Peach Echo",
        hex: "#f7786b",
        year: "2016",
        season: "Spring"
      },
      {
        color: "Serenity",
        hex: "#91a8d0",
        year: "2016",
        season: "Spring"
      },
      {
        color: "Snorkel Blue",
        hex: "#034f84",
        year: "2016",
        season: "Spring"
      },
      {
        color: "Buttercup",
        hex: "#fae03c",
        year: "2016",
        season: "Spring"
      },
      {
        color: "Limpet Shell",
        hex: "#98ddde",
        year: "2016",
        season: "Spring"
      },
      {
        color: "Lilac Gray",
        hex: "#9896a4",
        year: "2016",
        season: "Spring"
      },
      {
        color: "Fiesta",
        hex: "#dd4132",
        year: "2016",
        season: "Spring"
      },
      {
        color: "Iced Coffee",
        hex: "#b18f6a",
        year: "2016",
        season: "Spring"
      },
      {
        color: "Green Flash",
        hex: "#79c753",
        year: "2016",
        season: "Spring"
      },

      //Fall 2015
      {
        color: "Dried Herb",
        hex: "#847A59",
        year: "2015",
        season: "Fall"
      },
      {
        color: "Desert Sage",
        hex: "#A7AE9E",
        year: "2015",
        season: "Fall"
      },
      {
        color: "Stormy Weather",
        hex: "#58646D ",
        year: "2015",
        season: "Fall"
      },
      {
        color: "Oak Buff",
        hex: "#CF9C63",
        year: "2015",
        season: "Fall"
      },
      {
        color: "Marsala",
        hex: "#964F4C",
        year: "2015",
        season: "Fall"
      },
      {
        color: "Biscay Bay",
        hex: "#097988",
        year: "2015",
        season: "Fall"
      },
      {
        color: "Reflecting Pond",
        hex: "#203E4A",
        year: "2015",
        season: "Fall"
      },
      {
        color: "Cadmium Orange",
        hex: "#F99471",
        year: "2015",
        season: "Fall"
      },
      {
        color: "Cashmere Rose",
        hex: "#CE879F",
        year: "2015",
        season: "Fall"
      },
      {
        color: "Amethyst Orchid",
        hex: "#926AA6",
        year: "2015",
        season: "Fall"
      },

      //Spring 2015
      {
        color: "Aquamarine",
        hex: "#9DC3D4",
        year: "2015",
        season: "Spring"
      },
      {
        color: "Scuba Blue",
        hex: "#00ABC0",
        year: "2015",
        season: "Spring"
      },
      {
        color: "Beveled Glass",
        hex: "#7ACCB8",
        year: "2015",
        season: "Spring"
      },
      {
        color: "Classic Blue",
        hex: "#0F4C81",
        year: "2015",
        season: "Spring"
      },
      {
        color: "Toasted Almond",
        hex: "#D2B49C",
        year: "2015",
        season: "Spring"
      },
      {
        color: "Strawberry Ice",
        hex: "#E78B90",
        year: "2015",
        season: "Spring"
      },
      {
        color: "Tangerine",
        hex: "#F88F58",
        year: "2015",
        season: "Spring"
      },
      {
        color: "Custard",
        hex: "#E5D68E",
        year: "2015",
        season: "Spring"
      },
      {
        color: "Marsala",
        hex: "#964F4C",
        year: "2015",
        season: "Spring"
      },
      {
        color: "Glacier Gray",
        hex: "#C5C6C7",
        year: "2015",
        season: "Spring"
      },

      //Fall 2014
      {
        color: "Radiant Orchid",
        hex: "#8b4584",
        year: "2014",
        season: "Fall"
      },
      {
        color: "Royal Blue",
        hex: "#1e3176",
        year: "2014",
        season: "Fall"
      },
      {
        color: "Aluminum",
        hex: "#75796a",
        year: "2014",
        season: "Fall"
      },
      {
        color: "Aurora Red",
        hex: "#a90118",
        year: "2014",
        season: "Fall"
      },
      {
        color: "Misted Yellow",
        hex: "#d9b74b",
        year: "2014",
        season: "Fall"
      },
      {
        color: "Sangria",
        hex: "#760030",
        year: "2014",
        season: "Fall"
      },
      {
        color: "Mauve Mist",
        hex: "#af8ea9",
        year: "2014",
        season: "Fall"
      },
      {
        color: "Cognac",
        hex: "#60413c",
        year: "2014",
        season: "Fall"
      },
      {
        color: "Bright Cobalt",
        hex: "#014983",
        year: "2014",
        season: "Fall"
      },
      {
        color: "Cypress",
        hex: "#363b25",
        year: "2014",
        season: "Fall"
      },

      //Spring 2014
      {
        color: "Dazzling Blue",
        hex: "#1464ab",
        year: "2014",
        season: "Spring"
      },
      {
        color: "Violet Tulip",
        hex: "#9096c8",
        year: "2014",
        season: "Spring"
      },
      {
        color: "Freesia",
        hex: "#fcd800",
        year: "2014",
        season: "Spring"
      },
      {
        color: "Paloma",
        hex: "#a7b0ad",
        year: "2014",
        season: "Spring"
      },
      {
        color: "Placid Blue",
        hex: "#82b8dc",
        year: "2014",
        season: "Spring"
      },
      {
        color: "Celosa Orange",
        hex: "#f38047",
        year: "2014",
        season: "Spring"
      },
      {
        color: "Hemlock",
        hex: "#9cccb2",
        year: "2014",
        season: "Spring"
      },
      {
        color: "Radiant Orchid",
        hex: "#ac70ae",
        year: "2014",
        season: "Spring"
      },
      {
        color: "Cayenne",
        hex: "#e0655d",
        year: "2014",
        season: "Spring"
      },
      {
        color: "Sand",
        hex: "#cfb38c",
        year: "2014",
        season: "Spring"
      }
    ],
    messages: []
  },

  computed: {
    filteredColors: function() {
      let self = this;

      return this.colors.filter(function(color) {
        let parts = self.colorSearch.trim().split(" ");

        for(let part of parts) {
          let searchRegex = new RegExp(part, 'i');

          if(!(
            searchRegex.test(color.hex) ||
            searchRegex.test(color.color) ||
            searchRegex.test(color.year) ||
            searchRegex.test(color.season)
          )) {
            return false;
          }
        }

        return true;
      })
    }
  },

  methods: {
    addedToClipboard: function(color, hex) {
      let self = this,
          newMessage = {
            message: color + " (" +  hex + ") copied to clipboard",
            hex: hex,
            timeout: ""
          };

      newMessage.timeout = setTimeout(function() {
        self.messages.shift();
      }, 3000)

      this.messages.push(newMessage);
    },

    removeMessage: function(index) {
      clearTimeout(this.messages[index].timeout);
      this.messages.splice(index, 1);
    }
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/vue@2.0.3/dist/vue.js
  2. https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js