const CASES = [
      title: 'Microservices Orchestration',
      blurb: 'Temporal is a perfect fit for orchestrating microservices.'
      title: 'Financial Transactions',
      blurb: 'For software that interacts with money (especially someone else\'s), reliability and consistency are top priorities.'
      title: 'Resource Provisioning',
      blurb: 'Provisioning resources depends on a series of potentially long-running operations with many possibilities for intermittent failures.'
      title: 'Monitoring',
      blurb: 'Temporal provides guaranteed execution with exactly-once semantics with automatic retries.'
  - for (const item of CASES)
        .font-bold.mb-2= item.title
        a(href="#") Learn More
View Compiled
  box-sizing border-box
  min-height 100vh
  display grid
  place-items center
  background hsl(0, 0%, 10%)
  --expand 1
  content ''
  position absolute
  height 100%
  width 100%
  background hsl(0, 0%, 5%)
  border 2px solid white
  top 0
  left 0
  z-index -1
  transform translate(calc(var(--expand) * -2%), calc(var(--expand) * -2%))
  transition transform 0.2s
  transition transform 0.2s
  transform translate(calc(var(--expand) * -4%), calc(var(--expand) * -4%))

  color #C7EDEF
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.4/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.