mqxu

Customer Management UI

Inspired by Shuvo Cold "https://dribbble.com/shots/14673441-Transport-Service-Dashboard"

A Pen by Aysenur Turk on CodePen.

License.

mqxu

<div id="root"></div>

mqxu

<div id="root"></div>

mqxu

Card Hover Interactions

Hacking together a solution to show part of an element in a card as a default state, lining up the element headline across each card and then animating the element to the center of its parent element

A Pen by Ryan Mulligan on CodePen.

License.

mqxu

Animated Tab Bar

Designed by: Mauricio Bucardo

Original image: https://dribbble.com/shots/5619509-Animated-Tab-Bar

You can use this menu in your projects. It also works with 100% width and reacts to changing the size of the window :)

mqxu

Generative macOS Big Sur Waves 🌊 [SVG]

This is a generative program that creates macOS Big Sur style wave backgrounds. Each image is random within constraints

The waves generated here may not always look perfect, but they are unique! If you find an output you like, you can copy the SVG to your clipboard using the download button 🚀

Interested in a tutorial on how I made this? Let me know!

A Pen by George Francis on CodePen.

mqxu

Examples Vue Pug

A Pen by Raul Guerra on CodePen.

License.

mqxu

body.blue-grey.darken-3
  #root
    .side-nav#mobile.blue-grey.darken-3
      ul
        li(v-for="link in links")
          a(:href="link.link")
            span(v-text="link.text").blue-grey-text.text-lighten-3.flow-text
            i(v-text="link.icon").material-icons.left.blue-grey-text.text-lighten-3
  
    header

mqxu

#demo.container
  input(v-model="search" placeholder="Filter users by name or age").form-control
  table.table.table-striped
    thead
      tr
        th(v-repeat="column: columns")
          a(href="#" v-on="click: sortBy(column)" v-class="active: sortKey == column") {{ column | capitalize }}
    tbody
      tr(v-repeat="users | filterBy search | orderBy sortKey reverse")
        td {{ name }}

mqxu

main#app.container
  div.section
    form(@submit.prevent="addItem")
      label.label Add another
      div.field.has-addons
        div.control
          input.input(required, autofocus, v-model="newItem", placeholder="Remake this in React")
        button(type="submit").button.is-info
          i.fa.fa-plus
          span Add