SOURCE

<div class="Dashboard">
  <section class="Widget NotesWidget">
    <header class="Widget-header">
      <h2 class="Widget-headline">Notes</h2>
      
      <div class="Widget-controls">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/plus-01.svg" alt="" />
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/minus-02.svg" alt="" />
      </div>
    </header>
    <div class="Widget-body">
      
      <img 
           src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/mic-03.svg" 
           alt="" />
    </div>
  </section>

  <section class="Widget EventsWidget">
    <header class="Widget-header">
      <h2 class="Widget-headline">Don't Forget</h2>
    </header>
    <div class="Widget-body">
      <p>Feed the dog or he will die :(</p>
      
      <div class="Widget-controls">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/pencil-06.svg" alt="" />
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/cal.svg" alt="" />
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/trash.svg" alt="" />
        <span class="EventsWidget-count">2</span>
      </div>
    </div>
  </section>
  
  <section class="Widget ColorForecastWidget">
    <header class="Widget-header">
      <h2 class="Widget-headline">Color Forecast</h2>
    </header>
    
    <ul class="Widget-body">
      <li class="Color-1">#D4F4E8</li>
      <li class="Color-2">#FF95A2</li>
      <li class="Color-3">#ED8161</li>
      <li class="Color-4">#68A691</li>
    </ul>
  </section>
  
  <section class="Widget CommuteWidget">
    <header class="Widget-header">
      <img class="CommuteWidget-graphic" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/house-12.svg" alt="" />
    </header>
    <div class="Widget-body">
      <h2 class="Widget-headline">Commute Home</h2>
      <h3 class="Widget-subHeadline">Current Estimate</h3>
      <h4 class="Widget-data">1 hour</h4>
    </div>
  </section>
  
  <section class="Widget WeatherWidget">
    <header class="Widget-header">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/sun.svg" alt=""
           class="WeatherWidget-primaryIcon"/>
      
      <h2 class="Widget-headline">58&deg;</h2>
    </header>
    <div class="Widget-body">
      <p>Wear a light jacket.<br />You might end up carrying it.</p>
    </div>
  </section>
  
  <section class="Widget CalendarWidget">
    <header class="Widget-header">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/arrowl.svg" alt="" />
      <h2 class="Widget-Title">March</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/arrowr.svg" alt="" />
    </header>
      <table class="Widget-body">
        <thead class="CalendarWidget-dayHeaders">
          <tr>
            <td>Sun</td>
            <td>Mon</td>
            <td>Tue</td>
            <td>Wed</td>
            <td>Thu</td>
            <td>Fri</td>
            <td>Sat</td>
          </tr>
        </thead>
        <tbody class="CalendarWidget-days">
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>
          <tr>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
          </tr>
          <tr>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
            <td>21</td>
          </tr>
          <tr>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
            <td>28</td>
          </tr>
          <tr>
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
  </section>
  
  <section class="Widget MessageWidget">
    <header class="Widget-header">
       <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/mail.svg" alt="" class="MessageWidget-graphic"/>
      <h2 class="Widget-headline">Do you have enough socks?</h2>
      <h3 class="Widget-subHeadline">Mom</h3>
    </header>
    <div class="Widget-body">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/pencil-06.svg" alt="" />
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/dots-19.svg" alt="" />
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/reply-05.svg" alt="" />
    </div>
  </section>
</div>

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  padding: 20px 40px 80px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/tiny_grid.png);
  font-family: 'Merriweather Sans', sans-serif;
  color: ghostwhite;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.Dashboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

// General widget styles
.Widget {
  margin: 10px;
  box-shadow: 1px 1px 5px #333;
  text-align: center; // Catch all for text
}

.Widget-header {
  padding: 10px 20px;
}

.Widget-headline {
  margin: 0;
}

// Individual widget styling
.NotesWidget {
  display: flex;
  flex-direction: column;
  width: 200px;  
  background: white;
  font-size: 1.2em;
  color: #717A8D;
}

.NotesWidget .Widget-header {
  // Split the height...
  flex: 1;
  display: flex;
  flex-direction: column;
  
  // Give us ample spacing between everything
  justify-content: space-around;
  
  // Put everything on the same line for good measure
  align-items: center;
}

.NotesWidget .Widget-controls {
  display: flex;
  align-items: center;
  // Reasonable spacing between
  // items using the box width
  justify-content: space-around;
  width: 100%;
}

.NotesWidget .Widget-body {
  display: flex;
  align-items: center;
  justify-content: center;
  
  height: 100px;
  padding: 0 0 10px;
  background: ghostwhite;
}

.NotesWidget img {
  height: 40px;
}

/*
 * Events Widget
 */
.EventsWidget {
  // Stack all the content. Ever wonder why
  // flexbox defaults to horizontal? Us too.
  display: flex;
  flex-direction: column;
  
  background: #239ED9;
}

.EventsWidget .Widget-header {
  // Use less space than body and
  // perfectly center the content
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.EventsWidget .Widget-body {
  // Should take up most of the 
  // widget space and give plenty
  // of spacing between elements
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0 20px 10px;
  background: #2180AC;
}

.EventsWidget img {
  height: 30px;
}

.EventsWidget .Widget-controls {
  display: flex;
  
  // On the same line, spaced apart
  align-items: center;
  justify-content: space-between;
}

.EventsWidget-count {
  // inline-flex lets you easily 
  // center things inline. display: flex
  // works here too, but less reusable.
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  width: 30px;
  height: 30px;
  
  border-radius: 50%;
  background: white;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #239ED9;
}

/*
 * Color Forecast Widget
 */
.ColorForecastWidget {
  // Stack everything, nothing fancy
  display: flex;
  flex-direction: column;
  
  padding: 0;
  background: ghostwhite;
  color: #717A8D;
}

.ColorForecastWidget .Widget-header {
  // Take up as much space as allowed
  flex: 1;
  
  // Same centering trick we used elsewhere
  display: flex;
  align-items: center;
  justify-content: center;
  
  margin: 0;
}

.ColorForecastWidget .Widget-body {
  flex: 2;
  
  margin: 0;
  padding: 0;
}

.ColorForecastWidget li {
  padding: 1em 0;
  list-style: none; // GTFO
}

/*
 * Commute Widget
 */

// This one is neat because if you remove display: flex;
// it still works. Easy media query!
.CommuteWidget {
  display: flex;
  background: #E67053;
}

.CommuteWidget-graphic {
  width: 120px;
}

.CommuteWidget .Widget-header {
  display: flex;
  
  // Align to the bottom,
  // but horizontally centered
  align-items: flex-end;
  justify-content: center;
  padding: 20px 20px 0;
}

.CommuteWidget .Widget-body {
  display: flex;
  
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  padding: 10px 20px;
  background: lighten(#E67053,5%);
}

.CommuteWidget .Widget-subHeadline {
  margin: 1em 0 0;
  font-weight: normal;
}

.CommuteWidget .Widget-data {
  margin: .5em 0;
}

/*
 * Weather Widget
 */
.WeatherWidget {
  display: flex;
  flex-direction: column;
  width: 300px;
  background: #5CC8E5;
}

.WeatherWidget .Widget-header {
  position: relative;
  
  // You can use text-align: right, but flexbox
  // gives you more control with varied content
  display: flex;
  justify-content: flex-end;
  
  overflow: hidden; // Eat the icon
  padding: 10px;
}

.WeatherWidget .Widget-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.WeatherWidget-primaryIcon {
  position: absolute;
  top: -50px;
  left: -50px;
  height: 120px;
  width: 120px;
  z-index: 0;
  opacity: .4;
}

.WeatherWidget .Widget-headline {
  font-size: 3em;
  z-index: 1;
}

.WeatherWidget .Widget-body {
  flex: 1; // Take up all available space
  background: darken(#5CC8E5, 8%);
  padding: 20px;
  font-weight: 300;
}

/*
 * Calendar Widget
 */
.CalendarWidget {
  background: #2699D0;
  overflow-x: auto;
}

.CalendarWidget .Widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.CalendarWidget img {
  height: 30px;
}

.CalendarWidget .Widget-headline {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.CalendarWidget .Widget-body {
  background: #2180AC;
}

.CalendarWidget-dayHeaders td {
  color: #A1E0F5;
}

.CalendarWidget td {
  padding: 6px 8px;
}

/*
 * Message Widget
 */
.MessageWidget {
  display: flex;
  flex-direction: column;
  background: #ECEDF0;
  color: #717A8D;
}

.MessageWidget .Widget-header {
  flex: 1;
  display: flex;
  // Again, center everything and use
  // reasonable spacing
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 10px 20px;
}

.MessageWidget-graphic {
  width: 60px;
}

.MessageWidget .Widget-subHeadline {
  font-weight: 300;
}

.MessageWidget .Widget-body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20px;
  background: #E67053;
}

.MessageWidget .Widget-body img {
  height: 30px;
}

.Color-1 {
  background: #D4F4E8;
}

.Color-2 {
  background: #FF95A2;
}

.Color-3 {
  background: #ED8161;
  color: white;
}

.Color-4 {
  background: #68A691;
  color: white;
}

@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans:300,400,700);