// Mixins
mixin input(type, label)
.input-container
input(type='#{type}' id='#{label}' required)
label(for='#{label}')=label
.bar
mixin button(text)
.button-container
button
span=text
// Pen Title
.pen-title
h1 Material Login Form
span
| Pen <i class='fa fa-code'></i> by <a href='http://andytran.me'>Andy Tran</a>
.rerun
a(href='') Rerun Pen
.container
.card
.card
h1.title Login
form
+input('text', 'Username')
+input('password', 'Password')
+button('Go')
.footer
a(href='#') Forgot your password?
.card.alt
.toggle
h1.title Register
.close
form
If you look at the CodePen from where you found this you can see in the upper left corner right next to "HTML" that it says "(Pug)".
Pug is a templating engine. It stands at a respectable 1.3 million downloads weekly on NPM but I wouldn't say that it's widely used across the industry.
You can get more information about it on their site: https://pugjs.org/api/getting-started.html