import React from
"react"
;
import
"@blueprintjs/core/lib/css/blueprint.css"
;
function
App() {
return
(
<div style={{
padding: 20, textAlign:
"center"
,
color:
"green"
}}>
<h1>ReactJS Blueprint Colors Diverging Color Schemes
</h1>
<div style={{
display:
'flex'
, flexDirection:
'row'
,
paddingRight: 10
}}>
<div style={{
display:
'flex'
, flexDirection:
'column'
,
paddingRight: 10
}}>
<div style={{
backgroundColor:
'#1F4B99'
,
padding: 20, color:
'white'
}}>
#1F4B99
</div>
<div style={{
backgroundColor:
'#6B9FA1'
,
padding: 20, color:
'white'
}}>
#6B9FA1
</div>
<div style={{
backgroundColor:
'#FFE39F'
,
padding: 20, color:
'white'
}}>
#FFE39F
</div>
<div style={{
backgroundColor:
'#D78742'
,
padding: 20, color:
'white'
}}>
#D78742
</div>
<div style={{
backgroundColor:
'#9E2B0E'
,
padding: 20, color:
'white'
}}>
#9E2B0E
</div>
</div>
<div style={{
display:
'flex'
, flexDirection:
'column'
,
paddingRight: 10
}}>
<div style={{
backgroundColor:
'#1F4B99'
,
padding: 20, color:
'white'
}}>
#1F4B99
</div>
<div style={{
backgroundColor:
'#6CACB9'
,
padding: 20, color:
'white'
}}>
#6CACB9
</div>
<div style={{
backgroundColor:
'#FFFFFF'
,
padding: 20, color:
'black'
}}
>
#FFFFFF
</div>
<div style={{
backgroundColor:
'#DF9563'
,
padding: 20, color:
'white'
}}>
#DF9563
</div>
<div style={{
backgroundColor:
'#9E2B0E'
,
padding: 20, color:
'white'
}}>
#9E2B0E
</div>
</div>
<div style={{
display:
'flex'
, flexDirection:
'column'
,
paddingRight: 10
}}>
<div style={{
backgroundColor:
'#1D7324'
,
padding: 20, color:
'white'
}}>
#1D7324
</div>
<div style={{
backgroundColor:
'#8BAE44'
,
padding: 20, color:
'white'
}}>
#8BAE44
</div>
<div style={{
backgroundColor:
'#FFE39F'
,
padding: 20, color:
'white'
}}>
#FFE39F
</div>
<div style={{
backgroundColor:
'#6B9FA1'
,
padding: 20, color:
'white'
}}>
#6B9FA1
</div>
<div style={{
backgroundColor:
'#1F4B99'
,
padding: 20, color:
'white'
}}>
#1F4B99
</div>
</div>
<div style={{ display:
'flex'
,
flexDirection:
'column'
}}>
<div style={{
backgroundColor:
'#1D7324'
,
padding: 20, color:
'white'
}}>
#1D7324
</div>
<div style={{
backgroundColor:
'#96BA61'
,
padding: 20, color:
'white'
}}>
#96BA61
</div>
<div style={{
backgroundColor:
'#FFFFFF'
,
padding: 20, color:
'black'
}}>
#FFFFFF
</div>
<div style={{
backgroundColor:
'#6CACB9'
,
padding: 20, color:
'white'
}}>
#6CACB9
</div>
<div style={{
backgroundColor:
'#1F4B99'
,
padding: 20, color:
'white'
}}>
#1F4B99
</div>
</div>
</div>
</div>
);
}
export
default
App;