Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class = 'grid'></div>

              
            
!

CSS

              
                $light: #fff;
$dark: #242a33;
$mute: darken($light, 7.5%);
$pale: lighten($dark, 15%);
$padding: 15px;
$margin: 25px;
$body-font: 'Open Sans', sans-serif;
$heading-font: 'Maven Pro', sans-serif;

body {
  background: $dark;
  color: $light;
  padding-top:25px;
  font-family: $body-font;
  font-size: 16px;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}
$emojis: (
  grin : "\1f600",
  beam : "\1f601",
  joy : "\1f602",
  laugh : "\1f923",
  grin_1 : "\1f603",
  grin_2 : "\1f604",
  grin_3 : "\1f605",
  grin_4 : "\1f606",
  wink : "\1f609",
  smile : "\1f60a",
  savor : "\1f60b",
  smile_1 : "\1f60e",
  smile_2 : "\1f60d",
  blow_kiss : "\1f618",
  kiss : "\1f617",
  kiss_1 : "\1f619",
  kiss_2 : "\1f61a",
  smile_3 : "\263a",
  smile_4 : "\1f642",
  hug_face : "\1f917",
  star_struck : "\1f929",
  think : "\1f914",
  eyebrow : "\1f928",
  neutral : "\1f610",
  expressionless : "\1f611",
  mouth_1 : "\1f636",
  face : "\1f644",
  smirk : "\1f60f",
  face_1 : "\1f623",
  sad : "\1f625",
  mouth_open : "\1f62e",
  mouth_zip : "\1f910",
  hushed_face : "\1f62f",
  sleepy_face : "\1f62a",
  tired : "\1f62b",
  sleeping : "\1f634",
  relieved : "\1f60c",
  tongue_1 : "\1f61b",
  wink_1 : "\1f61c",
  squint_tongue : "\1f61d",
  drool : "\1f924",
  unamused : "\1f612",
  downcast : "\1f613",
  pensive : "\1f614",
  confused : "\1f615",
  face_down : "\1f643",
  money_mouth : "\1f911",
  astonished : "\1f632",
  frowning : "\2639",
  frown : "\1f641",
  confounded : "\1f616",
  disappointed : "\1f61e",
  worried : "\1f61f",
  nose_1 : "\1f624",
  crying : "\1f622",
  wail : "\1f62d",
  frown_1 : "\1f626",
  anguished : "\1f627",
  fearful : "\1f628",
  weary : "\1f629",
  exploding : "\1f92f",
  grimace : "\1f62c",
  anxious : "\1f630",
  screaming : "\1f631",
  flushed : "\1f633",
  zany_face : "\1f92a",
  dizzy : "\1f635",
  poute : "\1f621",
  angry : "\1f620",
  nauseated : "\1f922",
  vomiting : "\1f92e",
  sneezing : "\1f927",
  cowboy : "\1f920",
  partying : "\1f973",
  pleading : "\1f97a",
  lying : "\1f925",
  nerd : "\1f913",
  angry_1 : "\1f47f",
  clown : "\1f921",
  ogre : "\1f479",
  goblin : "\1f47a",
  skull : "\1f480",
  ghost : "\1f47b",
  alien : "\1f47d",
  thermo : "\1f912",
  robot : "\1f916",
  poo : "\1f4a9",
  baby : "\1f476",
  child : "\1f9d2",
  boy : "\1f466",
  girl : "\1f467",
  person : "\1f9d1",
  man : "\1f468",
  beard : "\1f9d4",
  woman : "\1f469",
  older_person : "\1f9d3",
  old_man : "\1f474",
  old_woman : "\1f475",
  monkey_1 : "\1f648",
  monkey_2 : "\1f649",
  monkey_3 : "\1f64a",
  police : "\1f46e",
  detective : "\1f575",
  guard : "\1f482",
  prince : "\1f934",
  princess : "\1f478",
  baby_angel : "\1f47c",
  Santa_Claus : "\1f385",
  superhero: "\1f9b8",
  mage : "\1f9d9",
  fairy : "\1f9da",
  vampire : "\1f9db",
  merperson : "\1f9dc",
  merman : "\1f9dc",
  mermaid : "\1f9dc",
  elf : "\1f9dd",
  man_elf : "\1f9dd",
  woman_elf : "\1f9dd",
  genie: "\1f9de",
  man_genie : "\1f9de",
  woman_genie : "\1f9de",
  zombie : "\1f9df",
  person_frown : "\1f64d",
  man_frown : "\1f64d",
  woman_frown : "\1f64d",
  person_pout : "\1f64e",
  man_pout : "\1f64e",
  woman_pout : "\1f64e",
  person_no : "\1f645",
  man_no : "\1f645",
  woman_no : "\1f645",
  person_ok : "\1f646",
  man_ok : "\1f646",
  woman_ok : "\1f646",
  person_tip: "\1f481",
  man_tip: "\1f481",
  woman_tip: "\1f481",
  person_hand : "\1f64b",
  man_hand : "\1f64b",
  woman_hand : "\1f64b",
  person_bow : "\1f647",
  man_bow : "\1f647",
  woman_bow : "\1f647",
  person_facepalm : "\1f926",
  man_facepalm : "\1f926",
  woman_facepalm : "\1f926",
  person_shrug: "\1f937",
  man_shrug: "\1f937",
  woman_shrug: "\1f937",
  person_walk : "\1f6b6",
  man_walk : "\1f6b6",
  woman_walk : "\1f6b6",
  person_run : "\1f3c3",
  man_run : "\1f3c3",
  woman_run : "\1f3c3",
  woman_dance : "\1f483",
  man_dance : "\1f57a",
  person_climb : "\1f9d7",
  man_climb : "\1f9d7",
  woman_climb : "\1f9d7",
  person_lotus : "\1f9d8",
  man_lotus : "\1f9d8",
  woman_lotus : "\1f9d8",
  shower: "\1f6c0",
  nap : "\1f6cc",
  horse_racing : "\1f3c7",
  skier : "\26f7",
  snowboarder : "\1f3c2",
  person_surfing : "\1f3c4",
  man_surfing : "\1f3c4",
  woman_surfing : "\1f3c4",
  person_swim : "\1f3ca",
  man_swim : "\1f3ca",
  woman_swim : "\1f3ca",
  person_lift : "\1f3cb",
  man_lift : "\1f3cb",
  woman_lift : "\1f3cb",
  person_cycle : "\1f6b4",
  race_car : "\1f3ce",
  motorcycle : "\1f3cd",
  person_cartwheel: "\1f938",
  man_cartwheel: "\1f938",
  woman_cartwheel: "\1f938",
  people_wrestle: "\1f93c",
  men_wrestle: "\1f93c",
  women_wrestle: "\1f93c",
  person_juggle : "\1f939",
  man_juggle : "\1f939",
  woman_juggle : "\1f939",
  couple_1: "\1f46b",
  kissing : "\1f48f",
  kissing_1 : "\1f469",
  couple : "\1f491",
  family: "\1f46a",
  selfie: "\1f933",
  biceps : "\1f4aa",
  sure : "\261d",
  fu: "\1f595",
  victory: "\270c",
  fingers_ : "\1f91e",
  vulcan_salute: "\1f596",
  call_me : "\1f919",
  raised_hand : "\270b",
  ok : "\1f44c",
  thumbs_up : "\1f44d",
  thumbs_down : "\1f44e",
  raised_fist : "\270a",
  fist : "\1f44a",
  left_fist : "\1f91b",
  right_fist : "\1f91c",
  wave : "\1f44b",
  love_your : "\1f91f",
  write : "\270d",
  clap : "\1f44f",
  open_hands : "\1f450",
  raising_hands : "\1f64c",
  palms_up : "\1f932",
  folded_hands : "\1f64f",
  handshake : "\1f91d",
  nail_polish : "\1f485",
  ear: "\1f442",
  nose: "\1f443",
  footprints: "\1f463",
  eyes : "\1f440",
  eye : "\1f441",
  brain : "\1f9e0",
  bone : "\1f9b4",
  tooth : "\1f9b7",
  mouth : "\1f444",
  kiss_mark : "\1f48b",
  heart_beat : "\1f493",
  revolving_hearts : "\1f49e",
  two_hearts : "\1f495",
  broken_heart : "\1f494",
  heart : "\2764",
  heart_1 : "\1f49b",
  heart_2 : "\1f9e1",
  anger_symbol : "\1f4a2",
  bomb : "\1f4a3",
  collision : "\1f4a5",
  sweat : "\1f4a6",
  dizzy_1 : "\1f4ab",
  speech_balloon : "\1f4ac",
  anger: "\1f5ef",
  thought : "\1f4ad",
  hole : "\1f573",
  glasses : "\1f453",
  sunglasses : "\1f576",
  goggles : "\1f97d",
  neck_tie : "\1f454",
  t_shirt : "\1f455",
  jeans : "\1f456",
  scarf : "\1f9e3",
  gloves : "\1f9e4",
  coat : "\1f9e5",
  socks : "\1f9e6",
  dress : "\1f457",
  kimono : "\1f458",
  bikini : "\1f459",
  women_cloth : "\1f45a",
  purse : "\1f45b",
  handbag : "\1f45c",
  clutch_bag : "\1f45d",
  shopping_bag : "\1f6cd",
  backpack : "\1f392",
  man_shoe : "\1f45e",
  running_shoe : "\1f45f",
  hiking_boot : "\1f97e",
  flat_shoe : "\1f97f",
  heeled_shoe : "\1f460",
  woman_sandal : "\1f461",
  woman_boot : "\1f462",
  crown : "\1f451",
  woman_hat : "\1f452",
  top_hat : "\1f3a9",
  graduation_cap : "\1f393",
  billed_cap : "\1f9e2",
  rescue_helmet : "\26d1",
  lipstick: "\1f484",
  ring: "\1f48d",
  gem_stone: "\1f48e",
  monkey_face: "\1f435",
  monkey: "\1f412",
  gorilla : "\1f98d",
  dog_face: "\1f436",
  dog: "\1f415",
  poodle: "\1f429",
  wolf_face: "\1f43a",
  fox_face : "\1f98a",
  cat_face: "\1f431",
  cat: "\1f408",
  lion : "\1f981",
  tiger_face: "\1f42f",
  tiger: "\1f405",
  leopard: "\1f406",
  horse_face: "\1f434",
  horse: "\1f40e",
  unicorn : "\1f984",
  zebra : "\1f993",
  deer : "\1f98c",
  cow_face: "\1f42e",
  ox: "\1f402",
  water_buffalo: "\1f403",
  cow: "\1f404",
  pig_face: "\1f437",
  pig: "\1f416",
  boar: "\1f417",
  pig_nose: "\1f43d",
  ram: "\1f40f",
  ewe: "\1f411",
  goat: "\1f410",
  camel: "\1f42a",
  camel_2: "\1f42b",
  llama : "\1f999",
  giraffe : "\1f992",
  elephant : "\1f418",
  rhinoceros : "\1f98f",
  hippopotamus : "\1f99b",
  mouse_face : "\1f42d",
  mouse_1 : "\1f401",
  rat : "\1f400",
  hamster : "\1f439",
  rabbit_face : "\1f430",
  rabbit : "\1f407",
  chipmunk : "\1f43f",
  hedgehog : "\1f994",
  bat : "\1f987",
  bear_face : "\1f43b",
  koala : "\1f428",
  panda: "\1f43c",
  kangaroo : "\1f998",
  badger: "\1f9a1",
  paw: "\1f43e",
  turkey : "\1f983",
  chicken : "\1f414",
  rooster : "\1f413",
  chick : "\1f423",
  chick_1 : "\1f424",
  chick_2 : "\1f425",
  bird : "\1f426",
  penguin : "\1f427",
  dove : "\1f54a",
  eagle : "\1f985",
  duck : "\1f986",
  owl : "\1f989",
  peacock : "\1f99a",
  parrot : "\1f99c",
  frog : "\1f438",
  crocodile : "\1f40a",
  turtle : "\1f422",
  lizard : "\1f98e",
  snake : "\1f40d",
  dragon_face : "\1f432",
  dragon : "\1f409",
  sauropod : "\1f995",
  spouting_whale : "\1f433",
  whale : "\1f40b",
  dolphin : "\1f42c",
  fish : "\1f41f",
  fish_1 : "\1f420",
  blowfish : "\1f421",
  shark : "\1f988",
  octopus : "\1f419",
  spiral_shell : "\1f41a",
  butterfly : "\1f98b",
  bug : "\1f41b",
  ant : "\1f41c",
  honeybee : "\1f41d",
  beetle : "\1f41e",
  cricket_1 : "\1f997",
  spider : "\1f577",
  spider_web : "\1f578",
  scorpion : "\1f982",
  mosquito : "\1f99f",
  bouquet : "\1f490",
  cherry_blossom: "\1f338",
  rosette : "\1f3f5",
  rose:  "\1f339",
  wilted_flower : "\1f940",
  hibiscus : "\1f33a",
  sunflower : "\1f33b",
  blossom : "\1f33c",
  tulip : "\1f337",
  seedling : "\1f331",
  tree: "\1f332",
  palm_tree: "\1f334",
  cactus: "\1f335",
  herb : "\1f33f",
  shamrock : "\2618",
  maple_leaf : "\1f341",
  fallen_leaf : "\1f342",
  leaf_in_wind : "\1f343",
  grapes : "\1f347",
  melon : "\1f348",
  watermelon : "\1f349",
  tangerine : "\1f34a",
  lemon : "\1f34b",
  banana : "\1f34c",
  pineapple : "\1f34d",
  mango : "\1f96d",
  apple : "\1f34e",
  pear : "\1f350",
  peach : "\1f351",
  cherries : "\1f352",
  strawberry : "\1f353",
  kiwi_fruit : "\1f95d",
  tomatoes : "\1f345",
  coconut : "\1f965",
  avocado : "\1f951",
  eggplant : "\1f346",
  potato : "\1f954",
  carrot : "\1f955",
  pepper : "\1f336",
  cucumber : "\1f952",
  leafy_green : "\1f96c",
  broccoli : "\1f966",
  mushroom : "\1f344",
  peanuts : "\1f95c",
  chestnut : "\1f330",
  bread : "\1f35e",
  croissant : "\1f950",
  baguette : "\1f956",
  pretzel : "\1f968",
  pancakes : "\1f95e",
  cheese : "\1f9c0",
  meat : "\1f356",
  poultry : "\1f357",
  meat_cut : "\1f969",
  bacon : "\1f953",
  hamburger : "\1f354",
  fries : "\1f35f",
  pizza  : "\1f355",
  hot_dog : "\1f32d",
  sandwich : "\1f96a",
  taco : "\1f32e",
  burrito : "\1f32f",
  flatbread : "\1f959",
  egg : "\1f95a",
  cooking : "\1f373",
  pan_of_food : "\1f958",
  food : "\1f372",
  spoon : "\1f963",
  salad : "\1f957",
  popcorn : "\1f37f",
  salt : "\1f9c2",
  canned_food : "\1f96b",
  bento_box : "\1f371",
  rice_ball: "\1f359",
  cooked_rice: "\1f35a",
  curry_rice: "\1f35b",
  steaming_bowl: "\1f35c",
  spaghetti: "\1f35d",
  roasted_sweet_potato : "\1f360",
  oden : "\1f362",
  sushi : "\1f363",
  fried_shrimp : "\1f364",
  dango : "\1f361",
  dumpling : "\1f95f",
  fortune_cookie : "\1f960",
  takeout_box : "\1f961",
  crab : "\1f980",
  shrimp : "\1f990",
  squid : "\1f991",
  soft_ice_cream : "\1f366",
  shaved_ice : "\1f367",
  ice_cream : "\1f368",
  doughnut : "\1f369",
  cookie : "\1f36a",
  birthday_cake : "\1f382",
  shortcake : "\1f370",
  pie : "\1f967",
  chocolate_bar : "\1f36b",
  candy : "\1f36c",
  lollipop : "\1f36d",
  custard : "\1f36e",
  honey_pot : "\1f36f",
  baby_bottle : "\1f37c",
  milk : "\1f95b",
  beverage : "\2615",
  teacup : "\1f375",
  sake : "\1f376",
  wine : "\1f377",
  cocktail : "\1f378",
  tropical_drink : "\1f379",
  beer_mug : "\1f37a",
  clinking_glasses : "\1f942",
  tumbler_glass : "\1f943",
  chopsticks : "\1f962",
  cutlery : "\1f37d",
  fork_knife : "\1f374",
  spoon_1 : "\1f944",
  kitchen_knife : "\1f52a",
  amphora : "\1f3fa",
  globe_africa : "\1f30d",
  snow_capped : "\1f3d4",
  mountain : "\26f0",
  volcano : "\1f30b",
  camping : "\1f3d5",
  beach : "\1f3d6",
  desert : "\1f3dc",
  stadium : "\1f3df",
  building : "\1f3db",
  houses : "\1f3d8",
  house : "\1f3e0",
  home: "\1f3e1",
  office_building : "\1f3e2",
  post_office : "\1f3e4",
  hospital : "\1f3e5",
  bank : "\1f3e6",
  hotel : "\1f3e8",
  convenience_store : "\1f3ea",
  school : "\1f3eb",
  department_store : "\1f3ec",
  factory : "\1f3ed",
  Japanese_castle : "\1f3ef",
  castle : "\1f3f0",
  statue_of_Liberty : "\1f5fd",
  church : "\26ea",
  mosque : "\1f54c",
  synagogue : "\1f54d",
  fountain : "\26f2",
  tent : "\26fa",
  hot_springs : "\2668",
  ferris_wheel : "\1f3a1",
  roller_coaster : "\1f3a2",
  barber_pole: "\1f488",
  circus_tent : "\1f3aa",
  railway_car : "\1f683",
  train : "\1f686",
  metro : "\1f687",
  light_rail : "\1f688",
  station : "\1f689",
  tram : "\1f68a",
  monorail : "\1f69d",
  railway : "\1f69e",
  tram_1 : "\1f68b",
  bus : "\1f68c",
  oncoming_bus : "\1f68d",
  ambulance : "\1f691",
  fire_engine : "\1f692",
  taxi : "\1f695",
  oncoming_taxi : "\1f696",
  tractor : "\1f69c",
  bicycle : "\1f6b2",
  kick_scooter : "\1f6f4",
  motor_scooter : "\1f6f5",
  motorway : "\1f6e3",
  railway_track : "\1f6e4",
  stop_sign : "\1f6d1",
  construction : "\1f6a7",
  anchor : "\2693",
  sailboat : "\26f5",
  canoe : "\1f6f6",
  speedboat : "\1f6a4",
  passenger_ship : "\1f6f3",
  ferry : "\26f4",
  motor_boat : "\1f6e5",
  ship : "\1f6a2",
  airplane : "\2708",
  small_airplane : "\1f6e9",
  departure : "\1f6eb",
  arrival : "\1f6ec",
  seat : "\1f4ba",
  helicopter : "\1f681",
  cableway : "\1f6a0",
  tramway : "\1f6a1",
  satellite_1 : "\1f6f0",
  rocket : "\1f680",
  flying_saucer : "\1f6f8",
  hourglass : "\231b",
  hourglass_1 : "\23f3",
  watch : "\231a",
  alarm_clock : "\23f0",
  stopwatch : "\23f1",
  new_moon : "\1f311",
  thermometer : "\1f321",
  sun : "\2600",
  star : "\2b50",
  glowing_star : "\1f31f",
  cloud : "\2601",
  tornado : "\1f32a",
  cyclone : "\1f300",
  rainbow : "\1f308",
  closed_umbrella : "\1f302",
  umbrella : "\2602",
  high_voltage : "\26a1",
  snowflake : "\2744",
  comet : "\2604",
  fire : "\1f525",
  droplet : "\1f4a7",
  jack-o-lantern : "\1f383",
  christmas_tree : "\1f384",
  sparkles : "\2728",
  balloon : "\1f388",
  party_popper : "\1f389",
  wind_chime : "\1f390",
  ribbon : "\1f380",
  gift : "\1f381",
  tickets : "\1f39f",
  medal : "\1f396",
  trophy : "\1f3c6",
  medal_4 : "\1f3c5",
  medal_1 : "\1f947",
  medal_2 : "\1f948",
  medal_3 : "\1f949",
  soccer_ball : "\26bd",
  baseball : "\26be",
  softball : "\1f94e",
  basketball : "\1f3c0",
  volleyball : "\1f3d0",
  american_football : "\1f3c8",
  rugby : "\1f3c9",
  tennis : "\1f3be",
  bowling : "\1f3b3",
  cricket : "\1f3cf",
  hockey : "\1f3d1",
  ice_hockey : "\1f3d2",
  ping_pong : "\1f3d3",
  badminton : "\1f3f8",
  boxing_glove : "\1f94a",
  goal_net : "\1f945",
  flag_in_hole : "\26f3",
  ice_skate : "\26f8",
  fishing_pole : "\1f3a3",
  skis : "\1f3bf",
  sled : "\1f6f7",
  direct_hit : "\1f3af",
  crystal_ball : "\1f52e",
  video_game : "\1f3ae",
  joystick : "\1f579",
  game_die : "\1f3b2",
  chess_pawn : "\265f",
  thread : "\1f9f5",
  yarn : "\1f9f6",
  megaphone : "\1f4e3",
  postal_horn : "\1f4ef",
  bell : "\1f514",
  microphone : "\1f3a4",
  headphone : "\1f3a7",
  saxophone : "\1f3b7",
  guitar : "\1f3b8",
  musical_keyboard : "\1f3b9",
  trumpet : "\1f3ba",
  violin : "\1f3bb",
  drum : "\1f941",
  mobile : "\1f4f1",
  telephone : "\260e",
  pager : "\1f4df",
  battery : "\1f50b",
  laptop : "\1f4bb",
  desktop : "\1f5a5",
  keyboard : "\2328",
  mouse : "\1f5b1",
  trackball : "\1f5b2",
  camera : "\1f4f7",
  candle : "\1f56f",
  bulb : "\1f4a1",
  flashlight : "\1f526",
  notebook : "\1f4d4",
  book : "\1f4d6",
  books : "\1f4da",
  notebook_1 : "\1f4d3",
  ledger : "\1f4d2",
  bookmark : "\1f516",
  label : "\1f3f7",
  money_bag : "\1f4b0",
  yen : "\1f4b4",
  dollar : "\1f4b5",
  euro : "\1f4b6",
  pound : "\1f4b7",
  credit_card : "\1f4b3",
  receipt : "\1f9fe",
  dollar_sign : "\1f4b2",
  envelope : "\2709",
  email : "\1f4e7",
  outbox : "\1f4e4",
  inbox : "\1f4e5",
  package : "\1f4e6",
  black_nib : "\2712",
  fountain_pen : "\1f58b",
  pen : "\1f58a",
  paintbrush : "\1f58c",
  memo : "\1f4dd",
  briefcase : "\1f4bc",
  file_folder : "\1f4c1",
  calendar : "\1f4c5",
  card_index : "\1f4c7",
  clipboard : "\1f4cb",
  pushpin : "\1f4cc",
  paperclip : "\1f4ce",
  ruler : "\1f4cf",
  scissors : "\2702",
  cabinet : "\1f5c4",
  wastebasket : "\1f5d1",
  locked : "\1f512",
  unlocked : "\1f513",
  key : "\1f511",
  old_key : "\1f5dd",
  hammer : "\1f528",
  pick : "\26cf",
  wrench : "\1f6e0",
  dagger: "\1f5e1",
  swords : "\2694",
  pistol : "\1f52b",
  bow : "\1f3f9",
  shield : "\1f6e1",
  wrench_1 : "\1f527",
  nut_bolt : "\1f529",
  gear : "\2699",
  scale : "\2696",
  link : "\1f517",
  chains : "\26d3",
  microscope : "\1f52c",
  telescope : "\1f52d",
  satellite : "\1f4e1",
  syringe : "\1f489",
  pill : "\1f48a",
  door : "\1f6aa",
  bed : "\1f6cf",
  couch_lamp : "\1f6cb",
  toilet : "\1f6bd",
  shower_1 : "\1f6bf",
  bathtub : "\1f6c1"
);

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 25px;
  max-width: 1084px;
  margin: 0 auto;
}

@each $emoji, $code in $emojis {
  .em_#{$emoji}:after {
    content: $code;
  }
}

[class^=em_] {
  background: transparent;
  display: inline-grid;
  justify-self: center;
}

[class^=em_]:after {
  padding-left: 15px;
  padding-right: 15px;
}

@for $i from 1 through 5 {
  $margin : $i * 25px; 
  .em-#{$i}x {
    font-size: $margin;
  }
}
              
            
!

JS

              
                let emojis = [
  'grin',
  'beam',
  'joy',
  'laugh',
  'grin_1',
  'grin_2',
  'grin_3',
  'grin_4',
  'wink',
  'smile',
  'savor',
  'smile_1',
  'smile_2',
  'blow_kiss',
  'kiss',
  'kiss_1',
  'kiss_2',
  'smile_3',
  'smile_4',
  'hug_face',
  'star_struck',
  'think',
  'eyebrow',
  'neutral',
  'expressionless',
  'face',
  'smirk',
  'face',
  'sad',
  'mouth_open',
  'mouth_zip',
  'hushed_face',
  'sleepy_face',
  'tired',
  'sleeping',
  'relieved',
  'wink_1',
  'squint_tongue',
  'drool',
  'unamused',
  'downcast',
  'pensive',
  'confused',
  'face_down',
  'money_mouth',
  'astonished',
  'frowning',
  'frown',
  'confounded',
  'disappointed',
  'worried',
  'nose',
  'crying',
  'wail',
  'frown',
  'anguished',
  'fearful',
  'weary',
  'exploding',
  'grimace',
  'anxious',
  'screaming',
  'flushed',
  'zany_face',
  'dizzy',
  'poute',
  'angry',
  'nauseated',
  'vomiting',
  'sneezing',
  'cowboy',
  'lying',
  'nerd',
  'angry_1',
  'clown',
  'ogre',
  'goblin',
  'skull',
  'ghost',
  'alien',
  'thermometer',
  'robot',
  'poo',
  'baby',
  'child',
  'boy',
  'girl',
  'person',
  'man',
  'beard',
  'woman',
  'older_person',
  'old_man',
  'old_woman',
  'monkey_1',
  'monkey_2',
  'monkey_3',
  'police',
  'detective',
  'guard',
  'prince',
  'princess',
  'baby_angel',
  'Santa_Claus',
  'mage',
  'fairy',
  'vampire',
  'merperson',
  'merman',
  'mermaid',
  'elf',
  'genie',
  'man_genie',
  'woman_genie',
  'zombie',
  'person_frown',
  'man_frown',
  'woman_frown',
  'person_pout',
  'man_pout',
  'woman_pout',
  'person_no',
  'man_no',
  'woman_no',
  'person_ok',
  'man_ok',
  'woman_ok',
  'person_tip',
  'man_tip',
  'woman_tip',
  'person_hand',
  'man_hand',
  'woman_hand',
  'person_bow',
  'man_bow',
  'woman_bow',
  'person_facepalm',
  'man_facepalm',
  'woman_facepalm',
  'person_shrug',
  'man_shrug',
  'woman_shrug',
  'person_walk',
  'man_walk',
  'woman_walk',
  'person_run',
  'man_run',
  'woman_run',
  'woman_dance',
  'man_dance',
  'person_climb',
  'man_climb',
  'woman_climb',
  'person_lotus',
  'man_lotus',
  'woman_lotus',
  'shower',
  'nap',
  'horse_racing',
  'skier',
  'snowboarder',
  'person_surfing',
  'man_surfing',
  'woman_surfing',
  'person_swim',
  'man_swim',
  'woman_swim',
  'person_lift',
  'man_lift',
  'woman_lift',
  'person_cycle',
  'race_car',
  'motorcycle',
  'person_cartwheel',
  'man_cartwheel',
  'woman_cartwheel',
  'people_wrestle',
  'men_wrestle',
  'women_wrestle',
  'person_juggle',
  'man_juggle',
  'woman_juggle',
  'couple_1',
  'kissing',
  'kissing_1',
  'couple',
  'family',
  'selfie',
  'biceps',
  'sure',
  'fu',
  'victory',
  'fingers_',
  'vulcan_salute',
  'call_me',
  'raised_hand',
  'ok',
  'thumbs_up',
  'thumbs_down',
  'raised_fist',
  'fist',
  'left_fist',
  'right_fist',
  'wave',
  'love_your',
  'write',
  'clap',
  'open_hands',
  'raising_hands',
  'palms_up',
  'folded_hands',
  'handshake',
  'nail_polish',
  'ear',
  'nose',
  'footprints',
  'eyes',
  'eye',
  'brain',
  'mouth',
  'kiss_mark',
  'heart_beat',
  'revolving_hearts',
  'two_hearts',
  'broken_heart',
  'heart',
  'anger_symbol',
  'bomb',
  'collision',
  'sweat',
  'dizzy_1',
  'speech_balloon',
  'anger',
  'thought',
  'hole',
  'glasses',
  'sunglasses',
  'neck_tie',
  't_shirt',
  'jeans',
  'scarf',
  'gloves',
  'coat',
  'socks',
  'dress',
  'kimono',
  'bikini',
  'women_cloth',
  'purse',
  'handbag',
  'clutch_bag',
  'shopping_bag',
  'backpack',
  'man_shoe',
  'running_shoe',
  'heeled_shoe',
  'woman_boot',
  'crown',
  'woman_hat',
  'top_hat',
  'graduation_cap',
  'billed_cap',
  'rescue_helmet',
  'lipstick',
  'ring',
  'gem_stone',
  'monkey_face',
  'monkey',
  'gorilla',
  'dog_face',
  'dog',
  'poodle',
  'wolf_face',
  'fox_face',
  'cat_face',
  'cat',
  'lion',
  'tiger_face',
  'tiger',
  'leopard',
  'horse_face',
  'horse',
  'unicorn',
  'zebra',
  'deer',
  'cow_face',
  'ox',
  'water_buffalo',
  'cow',
  'pig_face',
  'pig',
  'boar',
  'pig_nose',
  'ram',
  'ewe',
  'goat',
  'camel',
  'camel_2',
  'giraffe',
  'elephant',
  'rhinoceros',
  'mouse_face',
  'mouse',
  'rat',
  'hamster',
  'rabbit_face',
  'rabbit',
  'chipmunk',
  'hedgehog',
  'bat',
  'bear_face',
  'koala',
  'panda',
  'paw',
  'turkey',
  'chicken',
  'rooster',
  'chick',
  'chick_1',
  'chick_2',
  'bird',
  'penguin',
  'dove',
  'eagle',
  'duck',
  'owl',
  'frog',
  'crocodile',
  'turtle',
  'lizard',
  'snake',
  'dragon_face',
  'dragon',
  'sauropod',
  'spouting_whale',
  'whale',
  'dolphin',
  'fish',
  'fish_1',
  'blowfish',
  'shark',
  'octopus',
  'spiral_shell',
  'butterfly',
  'bug',
  'ant',
  'honeybee',
  'beetle',
  'cricket',
  'spider',
  'spider_web',
  'scorpion',
  'bouquet',
  'cherry_blossom',
  'rosette',
  'rose',
  'wilted_flower',
  'hibiscus',
  'sunflower',
  'blossom',
  'tulip',
  'seedling',
  'tree',
  'palm_tree',
  'cactus',
  'herb',
  'shamrock',
  'maple_leaf',
  'fallen_leaf',
  'leaf_in_wind',
  'grapes',
  'melon',
  'watermelon',
  'tangerine',
  'lemon',
  'banana',
  'pineapple',
  'apple',
  'pear',
  'peach',
  'cherries',
  'strawberry',
  'kiwi_fruit',
  'tomatoes',
  'coconut',
  'avocado',
  'eggplant',
  'potato',
  'carrot',
  'pepper',
  'cucumber',
  'broccoli',
  'mushroom',
  'peanuts',
  'chestnut',
  'bread',
  'croissant',
  'baguette',
  'pretzel',
  'pancakes',
  'cheese',
  'meat',
  'poultry',
  'meat_cut',
  'bacon',
  'hamburger',
  'fries',
  'pizza',
  'hot_dog',
  'sandwich',
  'taco',
  'burrito',
  'flatbread',
  'egg',
  'cooking',
  'pan_of_food',
  'food',
  'spoon',
  'salad',
  'popcorn',
  'canned_food',
  'bento_box',
  'curry_rice',
  'steaming_bowl',
  'spaghetti',
  'roasted_sweet_potato',
  'oden',
  'sushi',
  'fried_shrimp',
  'dango',
  'dumpling',
  'fortune_cookie',
  'takeout_box',
  'crab',
  'shrimp',
  'squid',
  'soft_ice_cream',
  'shaved_ice',
  'ice_cream',
  'doughnut',
  'cookie',
  'birthday_cake',
  'shortcake',
  'pie',
  'chocolate_bar',
  'candy',
  'lollipop',
  'custard',
  'honey_pot',
  'baby_bottle',
  'milk',
  'teacup',
  'sake',
  'wine',
  'cocktail',
  'tropical_drink',
  'beer_mug',
  'clinking_glasses',
  'tumbler_glass',
  'chopsticks',
  'cutlery',
  'fork_knife',
  'spoon',
  'kitchen_knife',
  'amphora',
  'globe_africa',
  'snow_capped',
  'mountain',
  'volcano',
  'camping',
  'beach',
  'desert',
  'stadium',
  'building',
  'houses',
  'house',
  'home',
  'office_building',
  'post_office',
  'hospital',
  'bank',
  'hotel',
  'convenience_store',
  'school',
  'department_store',
  'factory',
  'Japanese_castle',
  'castle',
  'statue_of_Liberty',
  'church',
  'mosque',
  'synagogue',
  'fountain',
  'tent',
  'hot_springs',
  'ferris_wheel',
  'roller_coaster',
  'barber_pole',
  'circus_tent',
  'railway_car',
  'train',
  'metro',
  'light_rail',
  'station',
  'tram',
  'monorail',
  'railway',
  'tram',
  'bus',
  'oncoming_bus',
  'ambulance',
  'fire_engine',
  'taxi',
  'oncoming_taxi',
  'tractor',
  'bicycle',
  'kick_scooter',
  'motor_scooter',
  'motorway',
  'railway_track',
  'stop_sign',
  'construction',
  'anchor',
  'sailboat',
  'canoe',
  'speedboat',
  'passenger_ship',
  'ferry',
  'motor_boat',
  'ship',
  'airplane',
  'small_airplane',
  'departure',
  'arrival',
  'seat',
  'helicopter',
  'cableway',
  'tramway',
  'satellite',
  'rocket',
  'flying_saucer',
  'hourglass',
  'hourglass_1',
  'watch',
  'alarm_clock',
  'stopwatch',
  'new_moon',
  'thermometer',
  'sun',
  'star',
  'glowing_star',
  'cloud',
  'tornado',
  'cyclone',
  'rainbow',
  'closed_umbrella',
  'umbrella',
  'high_voltage',
  'snowflake',
  'comet',
  'fire',
  'droplet',
  'jack-o-lantern',
  'christmas_tree',
  'sparkles',
  'balloon',
  'party_popper',
  'wind_chime',
  'ribbon',
  'gift',
  'tickets',
  'medal',
  'trophy',
  'medal_4',
  'medal_1',
  'medal_2',
  'medal_3',
  'soccer_ball',
  'baseball',
  'basketball',
  'volleyball',
  'american_football',
  'rugby',
  'tennis',
  'bowling',
  'cricket',
  'hockey',
  'ice_hockey',
  'ping_pong',
  'badminton',
  'boxing_glove',
  'goal_net',
  'flag_in_hole',
  'ice_skate',
  'fishing_pole',
  'skis',
  'sled',
  'direct_hit',
  'crystal_ball',
  'video_game',
  'joystick',
  'game_die',
  'chess_pawn',
  'megaphone',
  'postal_horn',
  'bell',
  'microphone',
  'headphone',
  'saxophone',
  'guitar',
  'musical_keyboard',
  'trumpet',
  'violin',
  'drum',
  'mobile',
  'telephone',
  'pager',
  'battery',
  'laptop',
  'desktop',
  'keyboard',
  'mouse',
  'trackball',
  'camera',
  'candle',
  'bulb',
  'flashlight',
  'notebook',
  'book',
  'books',
  'notebook',
  'ledger',
  'bookmark',
  'label',
  'money_bag',
  'yen',
  'dollar',
  'euro',
  'pound',
  'credit_card',
  'dollar_sign',
  'envelope',
  'email',
  'outbox',
  'inbox',
  'package',
  'black_nib',
  'fountain_pen',
  'pen',
  'paintbrush',
  'memo',
  'briefcase',
  'file_folder',
  'calendar',
  'card_index',
  'clipboard',
  'pushpin',
  'paperclip',
  'ruler',
  'scissors',
  'cabinet',
  'wastebasket',
  'locked',
  'unlocked',
  'key',
  'old_key',
  'hammer',
  'pick',
  'wrench',
  'dagger',
  'swords',
  'pistol',
  'bow',
  'shield',
  'wrench',
  'nut_bolt',
  'gear',
  'scale',
  'link',
  'chains',
  'microscope',
  'telescope',
  'satellite',
  'syringe',
  'pill',
  'door',
  'bed',
  'couch_lamp',
  'toilet',
  'shower',
  'bathtub'
];
function elem(selector, parent = document){
  return parent.querySelector(selector);
}

let el = '';
let grid = elem('.grid');
emojis.map(function(emoji, index) {
   let icon = document.createElement('div');
   let title = document.createElement('h4');
   let cell = document.createElement('div');
   cell.classList.add('contain');
   title.innerText = emoji;
   icon.classList.add('em-2x', `em_${emoji}`);
   cell.appendChild(title);
   cell.appendChild(icon)
   grid.appendChild(cell);
});
              
            
!
999px

Console