// 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 formSi miras el CodePen desde donde encontraste esto, puedes ver en la esquina superior izquierda justo al lado de "HTML" que dice "(Pug)".
Pug es un motor de plantillas. Tiene un respetable número de 1,3 millones de descargas semanales en NPM, pero no diría que se usa mucho en la industria.
Puede obtener más información al respecto en su sitio: https://pugjs.org/api/getting-started.html